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随 着 智能 手机 和 各 种 移动 终端 设备 的 普及 ，APP 作为 第 三 方 应 用 程序 ， 现 已 把 人 们 带 入 一 个 习惯 
使 用 APP 客户 端 上 网 的 时 代 。 目 前 ， 各 种 APP 应 用 层出不穷 , APP UI 设计 师 也 成 为 了 人 才 市 场 上 十 
分 紧俏 的 职业 。 
本 书 是 一 本 介绍 使 用 Photoshop 设计 制作 APP 界面 的 图 书 。 全 书 分 为 9 章 ， 第 1 章 介绍 了 APP 
| UI 设计 基础 ， 帮 助 读者 了 解 APP UI 入 门 理论 与 设计 基础 ; 第 2 章 、 第 3 章 介绍 了 Photoshop 在 APP \ 
4 | 有 UI 设计 中 的 基础 应 用 、APP 界面 中 前 见 元 素 设计 ， 帮 助 读者 掌握 如 何 使 用 Photoshop 制作 APP 基本 : | 
中。 图形 及 界面 元 素 ， 第 4 章 介绍 了 常见 界面 构图 与 设计 ， 使 读者 了 解 APP 界面 的 构图 ， 以 及 学 习 制作 党 ak 
(ih 见 的 界面 。 前 面 章节 的 内 容 使 读者 由 浅 及 深 逐 步 了 解 使 用 Photoshop 制作 APP 元 素 及 单个 界面 的 设 
前 。。 计 思路 和 制作 过 程 。 第 5 章 ~ 第 9 章 介绍 了 完整 APP 界面 的 设计 ， 包 括 游戏 类 APP Ul 设计、 音乐 类 











| 
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Ly, A ea Ne 了 ee S ye SS S 呈 " i 
四 | APP UI 设计、 社交 类 APP UI 设计、 购物 理财 类 APP UI| 设计 和 生活 工具 类 APP UI| 设计 ,涵盖 了 各 类 Ls 
| Ep IH 热门 APP 的 设计 制作 ,每 个 APP 都 包括 3~4 个 界面 讲解 ,并 介绍 了 素材 的 准备 , 以 及 每 个 界面 之 间 构 图 、 |B 
t 配色 的 统一 性 等 注意 事项 。 人 
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一 一 


理论 + 实 操 ， 专 业 性 强 。 本 书 将 APP UI 设计 的 相关 理论 在 实际 操作 中 逐步 引出 ， 不 仅 能 使 读者 
学 到 专业 知识 ， 也 能 在 实际 操作 中 掌握 实际 应 用 ， 从 而 全 面 掌握 APP 的 界面 设计 。 

案例 丰富 , 实用 性 强 。 书 中 前 4 章 为 APP 基础 实例 的 讲解 , 包括 APP 界面 中 的 所 有 元 素 与 控件 等 ， 
后 5 章 为 完整 的 APP 界面 实例 讲解 ， 涵盖 了 游戏 、 音 乐 、 社 交 、 购 物理 财 和 生活 功能 等 热门 APP 类 型 。 

设计 + 心得 , 内 容 全 面 。 书 中 每 章 添 加 了 “设计 师 心 得 ”模块 ,讲解 了 APP UI 设计 中 的 行业 知识 ， 
知识 更 人 全面， 帮助 读者 拓展 了 APP UI 设计 的 相关 知识 。 

视频 教学 ， 轻 松 学 习 。 本 书 配套 光盘 中 包括 书 中 所 有 实例 的 视频 教学 ， 读 者 可 以 通过 书 盘 结合 ， 
和 松 掌握 书 中 知识 。 
”本 书 适合 读者 
本 书 不 仅 适合 APP UI 设计 爱好 者 , 以 及 准备 从 事 APP UI 设计 的 人 员 , 也 适合 Photoshop 使 用 者 ， 
包括 平面 设计 师 、 网 页 设计 师 等 相关 人 员 参 考 使 用 。 同 时, 也 可 作为 相关 培训 机 构 及 学 习 的 辅助 教材 。 
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本 系列 图 书 由 多 位 UI 设计 师 、 用 户 体 验 设计 师 ， 以 及 设计 类 院 校 专家 、 教 授 共 同 策划 编写 。 其 
中 本 册 图 书 由 河北 工程 技术 高 等 专科 学 校 陈 玉 方 老师 负责 主要 编写 工作 ， 共 约 45 万 字 。 参 与 本 书 内 
容 编 写 、 整 理 、 素 材 收 集 ， 以 及 案例 测试 工作 的 人 员 还 包括 : 张 小 雪 、 何 辉 、 凶 国庆 、 姚 义 琴 、 江 涛 、 
李 雨 旦 、 乌 清华 、 向 慧 芳 、 喜 圣 超 、 陈 萍 、 张 范 、 李 佳 颖 、 即 凡 铭 、 谢 帆 、 田 龙 过 、 周 娟 娟 、 张 静 玲 、 
王 晓 飞 、 张 智 、 席 海燕 、 宋 丽 娟 、 黄 玉 香 、 董 栋 、 董 智 斌 、 刘 静 、 王 续 、 杨 所 、 李 梦 琢 、 黄 联 联 、 毕 
乞 好 他 人 个 守信 

由 于 编者 水 平 有 限 ， 书 中 玲 漏 与 不 妥 之 处 在 所 难免 。 在 感谢 您 选择 本 书 的 同时 ， 也 希望 您 能 够 把 
对 本 书 的 意见 和 建议 告诉 我 们 ( 详细 联系 方式 参看 图 书 封底 ) 。 
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> (JJ 本 节 将 介绍 APP UI 的 基础 入 门 知 识 ， 帮 助 读者 了 解 什么 是 
APP Ul 设计 、APP UI| 设计 的 原则 与 表现 形式 。 


IE 1 和 是 APPUI 


APP 是 APPlication 的 简称 ， 又 叫 手 机 应 用 程序 。 人 们 的 手机 票面 上 会 显示 各 种 各 样 
的 应 用 程序 图 标 ， 每 一 个 图 标 就 代表 了 一 个 APP， 比 如 有 浏览 网 页 的 浏览 器 APP、 播 放 
音乐 的 APP， 以 及 网 上 购物 的 APP 等 。 

Ul 是 User Interface ( 用 户 界面 ) 的 简称 。U| 设计 是 指 对 软件 的 人 机 交互 、 操 作 逻 辑 、 
界面 美观 的 整体 设计 。 

APP UI 即 手机 应 用 程序 的 UI 设计 ， 它 是 APP 应 用 程序 设计 中 的 重要 一 环 。 优 秀 的 
APP Ul 设计 具有 美观 易 履 、 操 作 简 单 昌 具有 引导 功能 ， 在 使 用 户 视 腕 感官 愉快 、 增 强 其 
兴趣 的 同时 ， 拉 近 用 户 与 设备 之 间 的 距离 ， 从 而 提高 APP 的 使 用 效率 。 

目前 我 国正 经 历 如 火 如 茶 的 互联 网 创业 热潮 , APP UI 设计 作为 其 中 一 个 重要 的 工种 ， 
就 业 前 景 非常 广阔 。 
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为 了 使 用 户 获得 更 好 的 视觉 体验 和 操作 体验 ， 设 计 APP 界面 的 过 程 需要 遵循 以 下 一 
系列 的 原则 。 
约 视觉 一 臻 性 
视觉 一 致 性 是 APP 界面 设计 最 重要 的 原则 。 在 设计 界面 元 素 时 ， 把 握 外 形 、 颜 色 、 
质感 的 统一 ， 才 能 使 整个 界面 形成 统一 的 风格 ， 如 图 1-2 所 示 。 
GEMS UI KIT 
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图 1-2 视觉 一 致 性 
全 简易 性 
简易 性 是 指 界面 应 简洁 、 直 观 、 吻 用 。 软 件 就 是 为 了 方便 用 户 使 用 而 设计 开发 的 ， 所 
以 在 设计 的 时 候 要 充分 考虑 到 软件 的 简单 性 、 易 操作 性 和 实用 性 ， 这 样 才 会 吸引 更 多 的 用 
户 。 界 面 中 华而不实 的 修饰 、 元 素 等 会 削弱 程序 本 身 的 功能 ， 也 不 便于 用 户 使 用 。iOS 系 
统 中 的 界面 设计 严格 遵循 了 简约 、 直 观 的 设计 原则 ， 如 图 1-3 所 示 。 
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图 1-3 简约 、 直 观 的 界面 设计 











人 @ 用 户 导 握 
在 设计 手机 软件 界面 时 ， 设 计 师 要 明确 软件 的 使 用 者 是 谁 ， 要 站 在 用 户 的 立场 和 观点 
来 考虑 设计 软件 。 
手机 APP 软件 如 今 已 成 为 企业 宣传 产品 和 文化 理念 的 手段 ， 因 此 作为 一 种 交互 方式 ， 
就 需要 设计 师 做 好 软件 的 UI 设计 去 吸引 大 量 用 户 来 使 用 。 


遵循 用 户 习 惯 


根据 用 户 的 使 用 习惯 、 操 作 习 惯 来 设计 。 比 如 ， 在 对 某 个 操作 进行 确认 时 ， 接 钮 上 会 
是 示 加 中 | a ON Ba A de a Se {Se 
设计 都 要 注意 用 户 习 惯 ， 当 不 知道 如 何 设 定 时 ， 可 以 借鉴 其 他 优秀 程序 的 界面 。 

应 用 程序 中 的 控件 可 以 实现 开局 / 关闭 等 功能 ， 这 些 控 件 的 位 置 也 影响 了 用 户 的 操作 
体验 ， 操 作 起 来 是 否 顺手 、 方 便 ， 是 检测 UI 设计 是 否 遵循 用 户 操 作 习 惯 的 标准 。 用 户 使 
用 手机 的 习惯 有 以 下 3 种 。 





@ 单 手持 握 操 作 点 49% : 单 手持 手机 是 主流 的 持 机 方式 ， 如 图 1-4 所 示 。 同 时 ， 
调查 还 发 现 有 67% 的 人 习惯 用 右手 拇指 操作 ，33% 的 用 户 则 使 用 左手 拇指 进行 
操作 。 尽 管 屏幕 尺寸 在 不 断 变化 ， 但 是 人 们 依然 习惯 用 拇指 操作 . 


图 1-4 单 手 持 握 操作 


一 只 手持 握 ， 田 一 只 手 操 作 占 36% : 除了 单 手 操作 和 双手 同时 操作 ， 人 们 还 
会 用 一 只 手 拿 着 手机 ， 另 一 只 手 操作 ， 其 中 用 大 拇指 来 操控 的 有 72%， 用 其 他 
手指 的 是 28%。 而 有 79% 的 人 使 用 左手 来 拿手 机 ，21% 的 人 使 用 右手 拿手 机 。 
如 图 1-5 所 示 为 一 只 手持 握 ， 另 一 只 手 操作 示意 图 





图 1-5 一 只 手持 握 ， 另 一 只 手 操作 
双手 操作 占 15%: 双手 操作 的 用 户 中 ， 有 90% 的 使 用 者 在 双手 操作 时 竖 着 
手机 ， 只 有 10% 的 情况 是 横着 拿手 机 使 用 的 。 另 外 ， 即 使 是 使 用 双手 操作 ， 庆 
用 者 也 会 只 用 一 根 手指 操作 ， 可 能 是 右 左 手 的 大 拇指 或 是 其 他 手指 。 如 图 1-6 
所 示 为 双手 操作 示意 图 。 





图 1-6 双手 操作 


掌握 了 用 户 使 用 手机 的 操作 习惯 后 ， 在 设计 时 将 重要 的 操作 放 在 界面 的 两 人 出 ， 便 于 用 
户 进行 单 手 操作 ， 将 次 要 操作 放 在 界面 的 顶端 ， 这 样 的 设计 更 符合 用 户 的 习惯 。 


侠 操作 人 性 化 

用 户 根据 自己 的 习惯 设置 界面 就 是 操作 人 性 化 的 表现 。 目 前 很 多 APP 都 支持 用 户 设 
置 界面 的 皮肤 、 风 格 等 ， 这 些 人 性 化 的 功能 让 用 户 体验 到 了 程序 的 多 样 性 和 丰富 度 。 

| 色彩 搭配 原则 

不 同 的 颜色 对 人 有 不 同 的 影响 , 使 人 产生 不 同 的 感觉 , 例如 黄色 可 以 让 人 联想 到 阳光 ， 

一 种 温暖 的 颜色 ， 黑 色 就 显得 比较 庄重 ， 所 以 设计 软件 时 要 根据 软件 主题 和 功能 来 做 好 
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色彩 的 搭配 。 

(大 视 觉 平衡 原则 
只 有 具备 平衡 的 视觉 效果 才能 够 让 用 户 和 舒服 地 使 用 软件 ， 所 以 设计 师 不 可 忽视 这 一 重 
要 原则 。 要 达到 视觉 平衡 ， 需 要 按照 用 户 的 阅读 习惯 来 设计 ， 使 界面 整齐 ， 用 户 才 可 以 流 
畅 地 阅读 内 容 。 
布局 控制 原则 
有 很 多 设计 师 不 是 很 重视 界面 的 排版 布局 ， 所 以 设计 得 过 于 死板 。 或 者 直接 模仿 别人 
的 软件 界面 设计 ， 把 大 量 信息 堆积 在 页 面 上 ， 导 致 布局 凌乱 ， 造 成 使 用 者 阅读 困难 的 问题 ， 
这 都 是 不 可 取 的 。 


CI APP ul 表现 形式 


下 面 介绍 常见 的 APP UI 表现 形式 。 

国 简洁 与 留 折 

简洁 界面 更 适合 深度 阅读 ， 在 信息 爆炸 的 互联 网 时 代 ， 应 用 更 强调 以 内 容 为 主 。 这 样 
的 表现 形式 更 能 体现 产品 的 文化 气韵 和 精致 高 雅 的 品质 ， 如 图 1-7 所 示 。 扁 平 化 就 是 界 
面 简洁 的 表现 之 一 。 
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图 1-7 简洁 与 留 


巧妙 运用 留 白 能 提升 APP 的 阅读 性 与 体验 感 ， 主 要 运用 在 以 下 产品 中 。 


名 以 文字 内 容 为 主 的 产品 ， 例 如 新 闻 、 书 籍 、 杂 志 竺 
@@ 富有 浓厚 文化 气质 的 产品 . 
加 。 高端、 有 科技 感 的 产品 ，Web 端 产品 运用 较 3 








色彩 是 设计 的 一 部 分 ， 不 同 的 色彩 能 给 人 市 来 不 同 的 感 党 。 色 彩 可 以 营造 氛围 ， 极 大 
地 影响 了 APP 的 整体 体验 。 另 外 , 颜色 可 以 用 来 树立 APP 的 个 性 , 比如 友好 、 有 趣 或 优雅 。 

Ea 

随 着 iOS7 的 发 布 ， 出 现 越 来 越 多 具备 唯一 主 色调 的 风格 设计 ， 采 用 简单 的 色 阶 ， 搭 
配 灰 阶 米 展现 信息 层次 。 仪 仅 用 一 个 主 色调 ， 也 能 够 很 好 地 表达 界面 层次 、 重 要 信息 ， 并 
且 能 展现 良好 的 视 守 效果， 如 图 1-8 所 示 。 
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1-8 单 色调 


多 色彩 。 

与 唯一 主 色调 形成 对 照 关 系 的 ， 就 是 多 彩色 风格 。 多 彩色 风格 是 由 不 同 页 面 、 不 同 信 
居 块 采用 多 彩色 撞 色 的 方式 来 设计 的 风格 ， 如 图 1-9 所 示 。 甚 至 同一 个 界面 的 局 部 都 可 
以 采用 多 彩色 撞 色 ， 如 图 1-10 所 示 。 但 是 对 于 一 些 内 容 型 的 APP， 这 种 风格 并 不 适用 。 
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图 1-9 不 同 页 面 的 多 彩色 
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图 1-10 同一 界面 的 多 彩色 
& 基 信息 数据 可 视 化 
至 于 对 信息 的 呈现 ， 越 来 越 多 的 APP 开始 尝试 数据 可 视 化 、 信 息 图 表 化 ， 让 界面 
上 不 仅 有 你 表 ， 还 有 更 多 直观 的 饼 图 、 局 形 图 、 折 线 图 、 柱 状 图 等 丰富 的 表达 方式 ， 
如 图 1-11 所 示 。 
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wi 
图 1-11 信息 可 视 化 

对 运用 图 片 营造 气氛 

不 仅 游戏 强调 沉浸 式 体验 ， Mak APP 也 同样 强调 沉浸 式 体验 。 例 如 酒店 、 餐 厅 、 旅 游 、 


天 气 等 类 型 的 APP 试图 通过 图 片 营 造 一 种 精致 、 优 雅 且 让 人 喘 临 其 境 的 感 锅 。 以 及 通过 


APP 创造 杀 密 无 间 的 感觉 ， 如 图 1-12 Wh 
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图 1-12 运用 图 片 营造 气氛 
用 通栏 的 图 片 作为 整个 APP 的 背景 ， 既 提升 了 视觉 表现 力 ， 又 丰富 了 APP 的 情感 化 
元 素 。 使 信息 或 操作 浮动 在 图 片上 ， 这 种 设计 方法 对 字体 和 排版 设计 要 求 更 高 ， 难 上 度 也 更 
多 ， 但 极 容易 泻 染 出 氛围 ， 如 图 1-13 所 示 。 
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图 1-13 大 图 作为 APP 背景 
@ 国 圆 形 的 妙用 
圆 形 是 最 容易 让 人 觉得 舒服 的 形状 ， 尤 其 是 在 充满 各 种 方 框 的 手机 屏幕 内 ， 增 加 一 些 
圆润 的 形 人 
应 用 圆 形 后 也 要 处 理 圆 形 的 实际 点 触 区 域 ， 不 能 因为 设计 成 圆 形 后 点 击 区 域 也 变 /小 了 ， 
致 点 击 准确 率 下 降 ， 虽 美观 度 提 升 但 易 用 性 却 受 到 了 影响 。 
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图 1-14 界面 中 的 圆 形 


任何 设计 都 需要 按 流 程 来 进行 ，APP UI| 设计 也 不 例外 。 

@ 产品 定位 

根据 产品 的 功能 ， 分 析 不 同 场景 下 的 网 络 环境 、 光 线 和 使 用 条 件 等 ， 针 对 共性 因素 和 
特定 因素 ， 提 供 相 应 的 功能 和 界面 设计 。 





考虑 用 户 的 系统 体验 , 因为 用 户 在 使 用 其 他 同类 APP 软件 时 , 积累 了 大 量 的 使 用 经 验 ， 
并 且 目 总 地 养 成 了 一 定 的 使 用 习惯 ， 因 此 ， 用 户 的 习惯 十 分 重要 。 


国 风格 定位 


产品 定位 直接 影响 着 产品 的 风格 。 风 格 有 很 多 种 ， 局 平 化 的 、 立 体 化 的 、 卡 通 的 、 清 
新 的 等 ， 如 图 1-15 所 示 。 选 择 一 种 主 颜 色 ， 以 及 相应 的 搭配 色彩 ， 以 符合 风格 定位 。 
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图 1-15 不 同 的 产品 风格 


l 
国产 品 控件 设计 
对 产品 界面 中 的 菜单 、 按 钮 、 功 能 图 标 等 控件 进行 设计 ， 以 及 对 选用 何 种 控件 进行 分 。 有 

而 


析 研 究 ， 如 图 1-16 所 示 。 
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图 1-16 产品 控件 
国界 面 整 体 视觉 优化 
完成 原型 后 对 整体 进行 视 名 设计 ， 对 界面 的 文子 、 配 色 、 布 局 、 图 标 大 小 等 ， 统 一 规 
江 ， 整 体 对 齐 ， 并 对 间距 等 进行 细 P 调 整 ， 优 化 统一 ， 碍 看 交互 细部 、 交 互 操作 是 否 符合 
用 户 操作 习惯 。 
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人 @ 应 用 图 标 设计 

应 用 图 标 是 APP 的 入 口 ， 与 APP 界面 中 的 功能 图 标 不 同 。 将 应 用 图 标 设计 放 在 最 后 
是 为 避免 APP 界面 修改 导致 应 用 图 标的 修改 。 也 能 使 应 用 图 标 和 APP 界面 达到 统一 。 为 
保证 不 同 界面 和 网 页 推广 的 使 用 ， 必 须 保证 应 用 图 标 可 以 输出 为 多 种 尺寸 ， 并 且 在 小 尺寸 
中 也 能 清晰 辨别 图 标 中 的 信息 ， 如 图 1-17 所 示 。 





492 X512 像素 





246X256 像素 
图 1-17 不 同 尺 寸 的 应 用 图 标 
@ 其 他 页 面 设计 
设计 其 他 二 级 页 面 ， 添 加 图 标 等 控件 到 界面 中 ， 完 成 整套 APP 设计 。 
《和 切片 与 输出 
对 图 片 进行 切片 并 输出 给 相关 人 员 ( 如 软件 工程 师 ) ， 即 完成 了 一 个 APP UI 的 设计 。 





当 


前 主 
系统 。 这 三 大 系统 不 论 是 交互 体验 ， 还 是 界面 风格 设计 ， 都 有 着 很 
大 的 区 别 。 


主流 的 三 I Android、Windows Phone 





IED ios 系统 
苹果 iOS 系统 自 7.0 版 本 开始 ， 就 使 用 了 扁平 化 的 设计 风格 ， 无 论 是 APP 图 标 ， 还 


是 界面 按钮 ， 都 是 简约 风格 。iOS 系统 一 贯 妃 求 简约 、 大 方 的 设计 和 人 性 化 的 操作 。 如 
1-18 所 示 为 iOS 系统 的 界面 展示 效果 。 
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图 1-18 iOS 界面 展示 效果 


Android 系统 一 直 都 是 比较 开放 式 的 设计 ,其 图 标 、 界 面 控 件 都 较为 真实 、 拟 物化 。 
相 比 iOS 系统 而 言 ，Android 系统 的 界面 显得 更 炫 ， 界 面 元 素 拥 有 了 更 多 的 特效 ， 如 
1-19 所 示 为 Android 系统 的 界面 展示 效果 。 另 外 ，Android 系统 也 在 向 着 局 平 化 


sd 16% 0 18:10 
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图 1-19 Android 界面 展示 效果 
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A) 


”证 有 史 WP 系统 


WP 系统 全 称 Windows Phone。WP 8.1 的 桌面 以 动态 磁 贴 的 形式 呈现 ， 一 个 磁 贴 代 
表 一 个 应 用 程序 ， 并 支持 磁 贴 尺寸 的 改变 。 该 系统 有 一 个 独 有 的 设计 ， 可 以 使 用 全 景 视图 
展示 一 个 完整 的 程序 界面 。WP 系统 使 用 的 扁平 化 风格 ， 更 偏向 于 单 色 块 的 设计 。 界 面 中 
的 元 素 都 进行 了 简单 化 ， 如 图 1-20 所 示 为 WP 系统 的 展示 效果 。 
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图 1-20 WP 界面 展示 效果 


APP UI 设计 基础 





APP UI 设计 的 尺寸 、 图 片 格 式 、 配 色 等 内 容 是 学 习 APP UI 
设计 必须 掌握 的 基础 知识 。 


1.3 


O 正和 APP ul 中 的 图 片 格式 


图 片 格式 是 所 有 设计 中 最 基础 的 知识 ， 下 面 介绍 APP UI 中 的 图 片 格式 。 
JPEG 
JPEG 是 一 种 广泛 适用 的 压缩 图 像 标准 方式 ， 也 是 互联 网 上 最 第 见 的 图 像 存 储 和 传送 
格式 。JPEG 非常 适合 被 应 用 在 那些 介 许 轻微 失真 的 像素 ( 英文 缩写 为 px ) 色彩 丰富 的 图 


片场 合 。 但 不 适合 于 所 含 颜 色 很 少 、 有 具有 大 块 颜 色相 近 的 区 域 或 亮度 委 异 十 分 明显 的 较 简 


单 的 图 片 。 在 APP UI 中 不 适合 用 米 经 制 线条 J 浊 文学 或 图 标 ， 
图 片 损坏 严重 。 


国 GF 


GIF 分 为 静态 GIF 和 动画 GIF 两 种 ， 扩 展 名 为 .gf， 是 一 种 压缩 位 图 格式 ， 支 持 透 明 


=le 
局 中 
| 


图 像 ， 


已 却 非常 适合 应 用 在 LOGO、 
《k PNG 
PNG, 


适用 于 多 种 操作 系统 。 


小 图 标 、 


Mi a ld 





因为 它 的 压缩 方式 对 这 几 种 


时 ， 网 上 很 多 小 动画 都 是 GIF 格式 。 但 GIF 
只 能 显示 256 色 。 和 JPG 格式 一 样 ， 这 是 一 种 在 网 络 上 非常 流行 的 图 形 文 件 格 式 。 
由 于 8 位 颜色 深度 的 限制 ， 


GIF 不 适合 应 用 于 各 种 色彩 过 于 丰富 的 照片 存储 场合 。 但 


按钮 等 需 少量 颜色 的 图 像 。 


图 像 文 件 存 储 格 式 ， 其 设计 目的 是 试图 蕉 代 GIF 和 TIFF 文件 格式 ， 同 时 增加 


一 些 GIF 文件 格式 所 不 具备 的 特性 。 PNG 格式 也 是 一 种 无 损 压 缩 , 但 与 GIF 格式 不 同 的 是 ， 
PNG 同时 支持 8 位 和 24 位 的 图 像 。8 位 PNG 图 片 的 用 途 与 GIF 格式 的 图 片 基本 相同 。 


(于 中 设计 RR 十 规范 


个 同 的 系统 、 手 机 型 号， 


界面 尺寸 不 同 ， 设 计 师 在 设计 前 需要 了 解 不 同 的 界面 尺寸 ， 


才能 在 设计 中 根据 需要 来 选择 相应 的 尺寸 。 


地 iPhone 的 界面 尺寸 


iPhone 的 APP 界面 一 般 由 状态 栏 、 导 航 栏 、 
1-21 所 示 。 因 为 宽度 是 固定 的 ， 所 以 设计 开发 起 来 很 方便 。 注 意 


lle 


320 像 素 


一 状态 栏 高 20 像 素 | 


导航 栏 高 44 像 素 


480 
像素 


三 标签 栏 高 49 像 素 





iPhone & iPod Je 
第 一 代 、 第 二 代 、 第 三 代 


750 像 素 


状态 栏 高 40 像 素 | | 
一 | 导航 栏 高 88 像 素 


1334 
像素 





二 标签 栏 高 98 像 素 


iPhone 6 


640 像 素 


一 状态 栏 高 40 像 素 | 


导航 栏 高 88 像 素 


960 
像素 


一 标签 栏 高 98 像 素 





iPhone 4、iPhone 4S 


1080 像 素 


| 状态 栏 高 54 像 素 | | 
一 导航 栏 高 132 像 素 


1920 
像素 





王 标签 栏 高 146 像 素 


iPhone 6 Plus 物理 版 
图 1-21 界面 组 成 


me 


主 淋 半幅 | 几 ddV 昌 


主 菜单 栏 和 中 间 的 内 容 区 域 组 成 ， 如 


，px 即 为 像素 的 英 


640 像 素 一 


一 状态 栏 高 40 像 素 
高 


1136 
像素 





三 标签 栏 高 98 像 素 


iPhone 5、iPhone 5C、iPhone 5S 


1242 像 素 


一 状态 栏 高 60 像 素 


2208 
像素 





蝶 标签 栏 高 146 像 素 


iPhone 6 Plus 设计 版 








运营 商 、 信 号 和 电量 的 区 域 ， 高 度 为 40 像素 。 
当前 页 面 名 称 ， 包 含 页 面 “ 返 回 ” 等 功能 按钮 ， 高 度 为 88 像素 。 
显示 在 页 面 下 方 的 区 域 ， 一 般 作 为 分 类 内 容 的 快捷 导航 ， 高 度 为 





具体 的 尺寸 参数 如 表 1-1 所 示 。 
表 1-1 iPhone 的 界面 尺寸 


设备 分 辩 率 PP1 《像素 密度 ) 状态 栏 高 度 导航 栏 高 度 标签 栏 高 度 


147 像素 
146 像素 
Emil Is 


和 和 全 关中 

iPhone 上 的 英文 字体 为 HelveticaNeue， 中 文 一 般 是 冬青 黑体 或 是 黑体 -~ 简 。 有 关 
文字 的 大 小 根据 不 同类 型 的 APP 都 有 不 同 的 定义 ， 如 表 1-2 所 示 为 百度 用 户 体验 部 提供 
的 统计 资料 。 另 外 ， 我 们 也 可 以 把 好 的 应 用 截图 放 进 Photoshop 里 对 比 ， 从 而 调试 自己 
a | a 人 





表 1-2 字体 大 小 


可 接受 下 线 较 小 值 舒适 值 
(80% 用 户 可 接受 ) (50% 以 上 用 户 认为 偏 小 ) (用 户 认 为 最 舒适 ) 
30 像素 2 像 过 





iPhone 图 标尺 十 
iPhone 平台 中 的 图 标尺 寸 如 图 1-22 所 示 。 


普 1024 像 素 一 | 六 512 像 素 一 | 六 114 像 素 一 | 上 产 57 像 素 一 | 
1024 像 素 512 像 素 114 像 素 57 像 素 
| 180 像 素 | 90 像 素 | 20 像 素 | 10 像 素 
， 4、4S、5、50、5S iPhone 3S 
App Store (Retina) App Store 6、6p 主 屏幕 主屏 莫 
六 58 像 素 一 | 六 87 像 素 一 | 上 66 像 素 一 | 六 44 像 素 一 | 
58 像 素 87 像 素 66 像 素 44 像 素 
10 像 素 | | 
iPhone 5、4S、4 iPhone 6 Plus iPhone 6 Plus 4、4S、5、5S、6 
Spotlight 搜 索 Spotlight 搜 索 工具 栏 和 导航 栏 工具 栏 和 导航 栏 


图 1-22 图 标尺 寸 
不 同 的 位 置 ， 图 标尺 寸 大 小 也 不 同 ， 具 有 参数 如 表 1-3 所 示 。 








表 1-3 iPhone 平台 图 标尺 寸 


设备 


APP Store 程序 应 用 


Spot 1 





ight 搜索 ”标签 栏 工具 栏 和 导航 栏 


iPhone6 Plus(@3 x ) 1024 x 1024 像素 | 180 x180 像素 | 114 x 114 像素 | 87 x 87 像素 |75 x 75 像素 | ”66 x 66 像素 
iPhone6(@2 x) 1024 x 1024 像素 | 120 x 120 像素 | 114 x 114 像素 | 58 x 58 像素 |75 x 75 像素 44x 44 像素 


iPhone4、4S(@2 x) 1024 x 1024 像素 120x120 像 素 114x114 像素 | 58x58 像素 | 75 x 75 像素 44x44 像 素 | 


@ iPad 的 设计 尺寸 
iPad 的 尺寸 示意 图 如 图 1-23 所 示 。 


一 一 一 1536 像 素 一 一 一 一 一 一 768 像素 一 一 一 


高 40 像 素 


1024 像 素 


标签 栏 高 


. 98 像 素 





iPad 3、 4、5、6 
Air、Air2、mini2 





高 20 像 素 


1024 像 素 


iPad 


第 一 代 、 第 二 代 


1-23 iPad 的 尺寸 示意 图 


具体 的 尺寸 参数 如 表 1-4 所 示 。 


表 1-4 iPad 的 设计 尺寸 


iPad 3、iPad 4、iPad 5、iPad 6、iPad Air、 
和 2048 x 1536 像素 264PPI 40 像素 88 像素 98 像素 


图 iPad 图 标尺 二 
iPad 图 标尺 寸 示意 图 如 图 1-24 所 示 。 





产 1024 像 素 一 | ~ 512 像 素 一 | 
1024 像 素 512 像 素 
| 180 像 素 | 90 像 素 
App Store (Retina) App Store 
一 100 像 素 一 | 上 50 像 素 一 | 
100 像 素 50 像 素 


| 20 像 素 外 9 像素 


小 章 状态 栏 高 度 
分 辩 率 


上 144 像 素 一 | 


144 像 素 


| 24 像 素 


iPad 3、4、5、6、 
Air、Air2、min2 


图 1-24 iPad 图 标尺 寸 示意 图 











一 一 一 768 像 素 一 一 一 
DS 
4 导航 栏 
高 20 像 素 高 44 像 素 
标签 栏 高 
49 像 素 
一 
iPad Mini 计 
基 
础 


2 栏 高 度 标签 相 兰 高 度 





一 72 像素 一 


72 像 素 


| 12 像 素 


iPad 第 一 代 、 第 二 代 
iPad Mini 


| 区 











Photoshop 热门 铬 PP 类 型 设计 从 入 门 到 精通 


iPad 设备 的 图 标尺 寸 参 数 如 表 1-5 所 示 。 
表 1-5 iPad 设备 的 图 标尺 二 


工具 栏 和 导航 栏 


设 标签 栏 
iPad 3、iPad 4、iPad 5、 
iPad 6、iPad Air、iPad | 1024 x 1024 像素 1180 x 180 像素 |144 x 144 像素 | 100 x 100 像素 | 50 x 50 像素 44 x 44 像素 
Alr2、IPad mini2 


© Android 设备 的 尺寸 与 分 辨 率 

Android 有 数 不 清 的 机 型 和 尺寸 。 这 里 介绍 一 些 主流 的 设计 尺寸 ， 如 480 x800 像 
素 、720 x 128 像素 。 众 所 周知 ，Android 手机 分 辨 率 发 展 得 越 来 越 大 ， 所 以 建议 使 用 
720 x 1280 像素 这 个 尺寸 来 设计 ， 在 切 图 时 可 以 通过 点 九 切 图 做 到 所 有 手机 的 适 配 。 

@ 界面 基本 组 成 元 素 。 


与 iOS 的 一 样 ，Android 设备 界面 也 有 状态 栏 、 导 航 栏 和 主 菜单 栏 ， 以 720 x 1280 像 
素 的 尺寸 来 设计 ， 那 么 状态 栏 的 高 度 应 为 50 像素 ， 导 航 栏 的 高 度 应 为 96 像素 ， 主 菜单 
栏 的 高 度 为 96 像素 。 但 是 由 于 是 开源 的 系统 ， 很 多 厂商 也 在 界面 上 各 显 神通 ， 因 此 这 里 
的 数值 也 只 能 作为 参考 。 

Android 为 了 区 别 于 iOS， 从 4.0 开始 提出 了 一 套 HOLO 的 UI 设计 风格 ， 鼓 励 将 底 
部 的 主 菜单 栏 放 到 导航 栏 下 面 ， 从 而 避免 点 击 下 方 材 料 时 误 点 虚拟 按键 ,很 多 APP 的 新 
版 中 也 采用 了 这 一 风格 。 

Android 设备 的 尺寸 。 


Android SDK 模拟 机 的 尺寸 如 表 1-6 所 示 。 
表 1-6 Android SDK 模拟 机 的 尺寸 


APP Store Spotlight 搜索 





屏幕 大 小 低 密度 (120) ldpi 中 等 密度 (160) mdpi EE 超 高 密度 (320) xhdpi 


WVGA800 ( 480 x 800 像素 ) 
HVGA ( 320 x 480 像素 ) WVGA854 ( 480 x 854 像素 ) 640 x 960 像素 
600 x 1024 像素 


WOVGA400( 240 x 400 像素 ) 
WOVGA432( 240 x 432 像素 ) 


WVGA800 ( 480 x 800 像素 ) 
WVGA854 ( 480 x 854 像素 ) 
600 x 1024 像素 


WVGA800( 480 x 800 像素 ) 
WVGA854( 480 x 854 像素 ) 


1536 x 1152 像素 
1920 x 1152 像素 
1920 x 1200 像素 


1024 x 768 
1280 x 768WXGA(1280 x 800 像 素 ) 


2048 x 1536 像素 


1024 x 600 像素 2560 x 1600 像素 





Android 系统 dp/sp/px 换算 表 。 
Android 系统 dp/sp/px 换算 表 如 表 1-7 所 示 。 


表 1-7 Android 系统 dp/sp/px 换算 表 


名 称 分 辨 率 比率 rate (针对 320px) 比率 rate (针对 640px) 比率 rate (针对 750px) 





名 称 到 比率 rate (针对 320px) 比率 rate (针对 640px) 比率 rate (针对 750px) 


-me | am ， | ww | 


© 常见 Android 的 图 标尺 寸 
图 标的 所 在 位 置 不 同 , 尺寸 也 不 同 , Android 平台 APP 图 标的 常用 尺寸 如 表 1-8 所 示 。 





表 1-8 Android 平台 APP 图 标的 常用 尺寸 


屏幕 大 小 启动 图 标 操作 栏 图 标 上 下 文 图 标 系统 通知 图 标 〈 白色 ) 


320 x 480 像素 ”48x48 像素 | ”48x48 像素 | 32x32 像素 x 32 32x32 像素 16x16 像 素 16 16x16 像 素 24x24 像 素 | 24x24 像 素 | 2 佛 素 2 2 佛 素 


480 x 800 像素 
480 x 854 像素 72X72 像素 48 x 48 像素 24 x 24 像素 36 x 36 像素 不 小 于 3 像素 
540 x 960 像素 


下 B 配色 原理 


配色 是 设计 中 永恒 的 话题 。 在 手机 APP 界 面 设计 中 , 色彩 是 很 重要 的 一 个 UI 设计 元 素 。 
合理 地 搭配 色彩 能 够 制作 出 震撼 的 视觉 效果 ， 设 计 出 吸引 人 的 焦点 。 
傅 ^PP 中 的 三 色 构成 


APP 色彩 搭配 方案 是 由 主 色 、 辅 助 色 和 点 缀 色 构 成 的 。 





@@ 主 &: 主 色 约 占 75%, 是 决定 画面 风格 趋向 的 色彩 , 主 色 并 不 是 只 能 有 一 个 颜色 ， 
它 可 以 是 一 种 色调 ， 一 般 为 同色 系 或 邻近 色 的 1 -~ 3 个 ， 如 图 1-25 所 示 。 
@9900 中 国联 通 全 2:15 下 午 
星期 日 “十 一 月 10 


bondsy 


A new way to buy, give 
or trade things with friends 


Xt DB 


for andorid 


Get started 


从 
向 上 滑动 解锁 


图 1-25 主 色 





19 





有 河和 于 小 I ddYv 昌 


[en| 
SS 











) 热门 鲍 PP 类 型 设计 从 入门 到 精通 





(辅助 双 ， 辅助 色 约 占 20%， 辅 助 色 用 于 辅助 主 色 ， 使 画面 更 完美 、 更 丰富 、 更 
显 优势 ， 如 图 1-26 中 所 示 的 白色 、 灰 色 为 辅助 色 ， 


ssees Vodafone RO 宇 22;06 
| LOG IN 


ms 


Log in with Facebook 


WE 


i 本 Password 
工 Position NA 
LOG IN 


Forgot your password? 





图 1-26 辅助 色 
点 睛 色 约 占 5%， 起 到 引导 阅读 、 装 饰 画面 、 营 造 独特 画面 风格 的 作 
黄色 和 绿色 为 点 睛 色 ， 中 间 图 和 右 图 


© 起 


用 ， 如 图 1-27 所 示 ， 左 图 中 的 蓝 色 、 
中 的 红色 为 点 睛 色 。 
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图 1-27 点 睛 色 
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国 APP 色彩 运用 原理 


手机 APP 界面 要 给 人 简洁 整齐 、 条 理 清 晰 的 感觉 ， 依 靠 的 是 界面 元 素 的 排版 和 间距 
和 DA 二 天 度 搭配 ， 如 图 1 一 28 所 示 。 
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图 1-28 色彩 的 搭配 
其 色彩 运用 原理 如 下 . 


© 色调 的 统一 : 针对 软件 类 型 及 用 户 工作 环境 选择 恰当 的 色调 ， 比 如 绿色 体现 环 
保 、 紫 色 代 表 浪 漫 、 蓝 色 表 现时 尚 等 。 淡 色 系 让 人 舒适， 而 背景 为 暗色 可 以 不 
让 人 党 得 累 。 
各 谓 、 色 弱 用 户 : 在 进行 设计 的 时 候 ， 不 要 忽视 了 色 育 、 和 色弱 群体 。 所 以 在 进 
行 界面 设计 的 时 候 ， 即 使 使 用 了 特殊 颜色 表示 重点 或 者 特别 的 东西 ， 也 应 该 使 
用 特殊 指示 符 、 着 重 号 ， 以 及 图 标 等 
顾 色 方案 a 顾 色 方案 风光 是 忆 琐 的 。 因为 显示 器 、 显 卡 的 问题 ， 色 彩 
的 表现 在 每 台 机 器 中 都 不 一 样 ， 所 以 应 该 经 过 严格 测试 ， 通 过 不 同 机 器 去 进 和 


颜色 测试 。 

这 人 循 对 比 原则 : 对 比 原 则 很 简单 ， 就 是 在 浅 色 背景 上 使 用 深 色 文字 ， 在 深 色 彰 
景 上 使 用 浅 色 文字 。 比 如 ， 蓝 色 文 字 在 白色 背 闵 中 容易 识别 ， 而 在 红色 背景 则 
不 易 分 辨 原因 是 红色 和 蓝 色 没 有 足够 的 反差 ， 但 蓝 色 和 和 白色 反差 很 大 。 除 非 
场合 特殊 ， 一 般 不 使 用 对 比 强烈 、 让 人 产生 异 恶 感 的 颜色 。 

色彩 类 别 的 控制 : 整个 界面 的 色彩 尽量 少 使 用 类 别 不 同 的 颜色 ,以免 眼 花 绑 乱 ， 
使 整个 界面 出 现 混杂 感 
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主 淋 半幅 | 几 ddV 昌 











(了 亚 吧 APP ul 设计 师 必 须 学 所 的 技能 


随 着 智能 手机 和 各 种 移动 终 疾 设备 的 普及 ，APP 作为 第 三 方 智 能 手机 应 用 程序 ， 现 已 
逐渐 把 人 们 融入 一 个 习惯 使 用 APP 客户 病 上 网 的 时 期 ，APP UI 设计 师 也 成 了 最 热门 的 职 
业 ， 想 要 成 为 APP UI 设计 师 必须 掌握 以 下 基本 技能 : 

人 国 熟练 操作 绘图 软件 

对 设计 绘图 软件 的 熟练 操作 是 制作 一 球 优 秀 APP 的 前 提 ， 这 类 软件 有 很 多 ， 其 中 最 
党 用 的 为 Photoshop 和 lllustrator， 本 书 选 择 的 是 Photoshop CC。 

国 了 解 移动 端的 界面 模式 

三 大 移动 平台 之 间 ， 有 着 相似 之 处 ， 但 是 在 深入 探究 它们 的 交互 设计 时 ， 会 发 现 它们 
在 理念 上 的 巨大 差异 。 作 为 一 个 设计 师 ， 需 要 明日 这 些 和 差异 所 在 ， 以 及 它们 是 如 何 体现 在 


实际 实例 中 的 。 

& 审美 能 

对 界面 的 视觉 设计 、 色 彩 的 观察 和 分 析 、 文 字 的 选择 、 整 体 界 面 的 统一 等 都 是 设计 师 
必须 要 有 的 基本 审美 。 


国 | 理解 能 力 和 手绘 能 力 
设计 师 应 该 具备 理解 能 力 和 手绘 能 力 ， 能 快速 地 看 懂 产 品 需求 文档 ， 以 及 在 设计 前 其 
的 手绘 草图 能 力 。 


CC 理 史 APP ul 发 展 趋势 


随 着 智能 设备 的 不 断 发 展 ，APP UI| 也 会 跟着 变化 ， 总 结 一 些 可 以 预见 的 设计 趋势 ， 
对 于 APP 的 产品 设计 师 是 有 非 同 寻常 的 意义 的 。 

6 更 大 的 屏幕 

大 屏 手 机 或 平板 手机 的 
屏幕 越 来 越 大 ， 如 图 1-29 
所 示 ， 预 计 在 将 来 越 来 越 
受 欢 迎 。 市 场 调研 公司 IDC 
认为 屏幕 超过 5 英寸 的 手机 
销售 将 激增 209%。 





图 1-29 更 大 的 屏幕 


国 拟 物化 的 回归 

从 微软 到 苹果 、 谷 歌 ， 在 去 拟 物 化 的 方向 上 越 走 越 远 ， 拟 物化 设计 似乎 已 经 成 为 过 时 
的 代名词 。 但 是 扁平 化 开始 引入 许多 拟 物 化 的 元 素 ， 使 得 现在 两 者 的 差别 不 再 那么 明显 ， 
如 图 1-30 所 示 。 未 来 人 们 将 会 在 更 多 的 地 方 看 到 拟 物 化 的 设计 ,无 论 是 从 未 过 时 的 复古 风 ， 
还 是 移动 闫 APP 设计 中 ， 对 于 细节 、 质 感 的 需求 开始 再 度 旺盛 ， 拟 物化 确实 正在 适度 地 、 
适时 地 逐步 回归 。 





图 1-30 在 扁平 化 中 加 入 拟 物 化 元 素 

站 更 简单 的 配色 

简约 美 是 近年 来 最 流行 的 设计 思路 ， 而 更 简单 的 配色 方案 也 贴 合 这 一 思路 。 随 着 iOS 
新 系统 而 流行 起 来 的 需 虹 色 的 影响 力 已 经 淡化 ， 现 在 的 用 户 更 加 喜欢 微妙 而 富有 质感 的 用 
色 ， 整 洁 和 干净 正在 压倒 华丽 而 浮 硅 的 配色 趋势 。 

对 大 胆 而 醒目 的 字体 运用 

每 个 APP 都 在 试图 争夺 用 户 的 注意 力 ， 大 胆 而 醒目 的 字体 运用 符合 这 一 需求 。 在 当 
前 的 市 场 状 况 下 ， 大 屏幕 手机 和 平板 是 主流 ， 这 一 点 是 非常 重要 的 使 用 背景 。 大 字体 在 移 
动 新 APP 上 呈现 ， 会 赋予 界面 以 层次 ， 提 高 特定 元 素 的 视 重 量 ， 让 用 户 难 以 忘怀 。 字 
体 够 大 、 够 优雅 、 够 独特 、 够 贴 合 ， 也 就 能 提升 页 面 的 气质 、 特 色 ， 而 这 正 是 移动 站 APP 
设计 的 另外 一 次 重要 的 机 会 。 

(Ko 交互 设计 的 崛起 

移动 端 APP 重视 用 户 需 求 的 另外 一 个 表现 就 是 对 于 交互 设计 的 重视 。 越 来 越 多 的 用 
户 开始 重视 产品 本 身 的 交互 设计 ， 所 以 作 ed a 
为 设计 师 和 开发 者 自然 有 义务 提供 更 优秀 
的 交互 设计 、 更 强大 的 视觉 设计 、 更 富有 
创造 性 的 架构 。 

(人 社交 媒体 的 加 成 

不 论 是 在 国内 还 是 国外 ， 社 交 媒 体 和 
APP 的 整合 正在 持续 不 断 地 推进 着 ， 如 
1-31 所 示 的 登录 界面 中 以 微 信 、 微 博 
登录 就 是 很 好 的 体现 。 





图 1-31 社交 媒体 的 加 成 
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Photoshop 热门 Opp 类 型 设计 从 入 门 到 精通 
更 哆 gUI 





人 隐藏 的 菜单 

有 些 设计 趋势 是 顺应 新 的 硬件 迅速 发 展 ， 有 些 却 经 过 了 长 久 的 酝酿 。 这 一 条 便 是 应 对 
既定 的 界面 设计 规则 缓慢 发 展 起 来 的 。 

屏幕 将 越 变 越 大 ， 但 移动 APP 提供 的 工作 空间 还 是 比 人 台式 机 和 笔记 本 电脑 少 。 一 种 
解决 方案 是 将 功能 隐藏 ， 直 到 它 被 需要 的 时 候 才 出 现 ; 将 导航 隐藏 ， 滑 动 时 才 显 示 功 能 的 
按钮 或 组 件 。 这 些 只 为 了 一 个 目的 一 一 保持 屏幕 洁净 。 

”游戏 性 和 个 性 

相信 大 家 已 经 注意 到 ， 应 用 程序 越 来 越 好 玩 ， 例 如 ， 让 人 不 由 发 笑 的 对 话 框 、 更 新 通 
知 的 小 彩蛋 等 。 设 计 师 们 用 明亮 的 色彩 、 弹 性 的 面板 和 该 谐 的 文本 ， 使 得 界面 的 游戏 性 与 
个 性 加 强 。 

人 简单 的 导航 模式 

清晰 的 排版 、 干 净 的 界面 、 赏 心 悦 目 的 APP 界面 设计 是 目前 用 户 最 喜欢 也 最 期 待 的 
东西 。 相 比 于 华丽 和 花哨 的 菜单 设计 ， 简 单 的 下 拉 菜 单 和 侧 边 栏 会 更 符合 趋势 。 

其 实 这 并 不 是 没有 道理 的 。 设 计 复 杂 的 APP 越 来 越 多 ， 用 户 对 于 新 的 APP 的 学 习 成 
本 也 日 趋 提 高 ， 简 单 的 导航 设计 的 直观 与 便捷 ， 可 以 让 用 户 更 容易 找到 他 们 需要 的 东西 。 
所 以 简单 的 导航 模式 更 加 平稳 、 流 畅 、 轻 松 、 友 好 。 

wj 使 用 模糊 背景 

这 种 设计 在 APP 的 设计 中 了 逐渐 多 了 起 来 。 模 糊 背 景 符合 时 下 流行 的 局 平 化 和 现代 风 
的 设计 ， 它 足够 赏心悦目 ， 可 以 很 好 地 同 与 时 下 流行 的 元 素 搭配 起 来 ， 提 升 用 户 体验 。 从 
设计 的 角度 上 来 看 ， 它 不 仅 易 于 实现 ， 帮 助 设计 规避 复杂 的 设计 ， 也 可 以 降低 设计 成 本 ， 
如 图 1-32 所 示 为 模糊 背景 的 APP 界面 。 
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1-32 模糊 育 景 
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APP UI 设计 中 的 基本 图 形 绘制 


p 在 制作 APP UI 界面 时 ， 必 须 选择 一 款 合适 的 绘图 软件 ， 本 书 
- 选择 的 是 Photoshop CC。 在 Photoshop 中 ，“ 和 赵 形 工具 ”“ 椭 圆 





Wy 一 | 工具 ”“ 圆 角 和 矩形 工具 ”等 是 最 基本 的 绘图 工具 ， 也 是 APP UI| 设 
Wl 


、 巧 古 ) 商 单 形状 


简单 形状 是 措 常 见 的 圆 形 、 和 矩形 、 圆 角 和 矩 形 等 ， 在 Photoshop 中 也 是 使 用 相应 的 工 
具 进 行 绘 制 的 。 简 单 形 状 常 见于 图 标 、 按 钮 等 APP 界面 中 的 小 控件 。 
@ 顶 园 


在 绘制 APP 界面 的 过 程 中 ， 经 常会 使 用 “椭圆 工具 ”绘制 李 圆 元 素 ， 包 括 椭圆 图 形 、 
按钮 、 图 标 等 ， 如 图 2-1 和 图 2-2 所 示 。 
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2-1 椭圆 元 素 1 2-2 椭圆 元 素 2 





“椭圆 工具 ”是 Photoshop 中 最 常用 的 工具 之 一 ， 一 般 使 用 “椭圆 工具 ”绘制 
APP UI 设计 中 的 圆 形 元 素 。 本 市 将 使 用 “椭圆 工具 ”经 制 简易 的 椭圆 图 标 ， 制 作 流程 
如 图 2-3 所 示 。 
LE 
| 国 拒 形 工具 1 


国 圆 角 拒 形 工具 U 
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全 多边 形 T 具 
/直线 I 具 J 


wm 
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2-3 制作 流程 








全 / 
“制作 步 又 
知识 点 “椭圆 工具 ” 
第 2 章 \2.1.1 简单 形状 \1. 椭圆 


LT 居 动 Photoshop， 按 Ctrl+N LA ee 3 ee 
组 合 键 打开 “新 建 ” 对 话 框 ， pop a ean 

设置 相关 参数 ,， 如 图 2-4 所 示 , 单 击 “ 确 

定 ” 按 钮 新 建文 档 。 


























新建 
2 
名 称 (N): 未 标题 -1 中 拒 开 3 工 且 
预 设 (P): 自 定 M 职 消 
人 动 
六 | 存 铺 预 设 (53)..。 | 贺 角 拒 形 工 县 
| 宽度 (W): 500 像素 v 删除 预 设 (D).…. 
高 度 (H): 500| 像素 = 
分 罪 率 (R): 72 像素 / 葛 寸 “~v 
颜色 模式 (M): RGB 颜色 ~ 8 位 v 
雪景 内 容 (C): 
背景 内 容 (C): 白色 图 信人 小 
和) 高 级 732.4K 





颜色 醒 置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 方形 像素 本 














图 2-4 “新 建 ” 对 话 框 图 2-5 选择 “椭圆 工具 ” 


ZJ 在 选项 栏 中 单 击 “填充 ” 右 0 在 弹出 的 对 话 框 中 选择 一 种 
侧 的 色 框 ， 在 打开 的 面板 中 顾 色 ,如 图 2-7 所 示 , 单 击 “ 确 


单 击 “ 拾 色 器 ”图 标 ， 如 图 2-6 所 示 。 定 ” 按 钮 关闭 对 话 框 。 








PS 文件 (F) 编 各 日、 图 像 四 ”图 层 (L) 类 型 (Y) 选择 (9 | 失色 器 ( 填充 颍 色 ) 


-| | 了 大 :| | 填充 : 攻 网 描 为 :| ;| |3 点 | ， 下 
当前 颜色 库 
的 图 IHJ 191 | 度 GDU77 
WS 100 jc al -32 
IB: 99 |% @b: -35 
DR: 0 加 65 
JG: 209 加 0 
DB: 254 引 6 
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ZI 避 症 
只 有 Web 颜色 # [TI 














最 i 使 用 的 颜色 
ee ee EE 





A < En 
染 宁 妆 部 




















图 2-6 单 击 “ 拾 色 器 ”图 标 图 2-7 选择 颜色 


L]/OD 进入 选项 栏 中 设置 宽 、 高 参数 均 为 350 像素 ， 如 图 2-8 所 示 。 






PS 文件 [F) 编 轧 (E) 





图 你 四 
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酒 岂 晶 及 代 刁 阅 站 In ddv 放 dousol00d 已 RS 











Photoshop 热门 全 PP 米 型 设计 从 入 门 到 精通 
和 
0 /OY 在 画布 上 单 击 并 拖 动 鼠 标 绘制 OF 再 次 使 用 “椭圆 工具 ”绘制 圆 ， 
O 圆 形 ， 如 图 2 一 9 有 vi 


修改 填充 颜色 为 和 白色， 复制 多 
个 并 进行 排列 ， 效 果 如 图 2-10 所 示 。 


图 2-9 绘制 圆 形 





图 2-10 完成 效果 


@ 加 矩形 
提示 1: 使 用 “ 顶 圆 工具 ”时 ， 按 住 Shift 键 
可 以 绘制 正 贺 。 使 用 "和 矩形 工具 ”可 以 绘制 出 正方 形 、 
提示 2: 选择 对 象 ， 按 CtritC 组 合 键 复制 ， 大 形态 Nn LAN 
按 CtrlHV 组 合 键 可 以 在 当前 位 置 粘贴 ， 或 者 在 息 形 的 图 形 效 采 ， 一 般 APP 束 me 
选择 对 象 后 ， 按 住 Ctrl 键 抱 动 ， 释 放 和 饼 标 后 即 杠 就 是 和 矩形， 而 界面 中 用 于 分 隔 的 对 象 


可 快速 复制 该 对 名 到 新 的 位 置 也 可 以 直接 按 
Ctrl+J 组 合 键 复制 图 层 。 


也 弟 用 到 赴 形 ， 如 图 2-11 所 示 。 
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2-11 拢 形 元 素 


/设计 思路 






使 用 “和 矩形 工具 ” 就 能 绘制 矩形 、 正 方形 等 图 形 ， 和 矩形 与 其 他 图 形 的 结合 就 能 形成 直 
语 的 元 素 ， 本 节 主 要 使 用 “矩形 工具 ”， 并 配合 “椭圆 工具 ”， 绘 制 简 易 的 相机 图 标 ， 制 
er ew 守 才 


EE el 


国 圆 角 拒 形 
¥ OD pi 

A 丑 和 迎 边 形 工 
本 二 | a 


国 | 歧 ” 目 定 形 术 工具 
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图 2-12 制作 流程 


> 








A 

第 2 章 \2.1.1 简单 形状 \2. 矩形 

O07 新 建文 档 ， 在 工具 箱 中 选择 02 在 画布 中 单 击 并 拖 动 鼠 
“矩形 于 员 , 姑 图 2013 所 未 | [re 

如 图 2-14 所 示 。 











酒 问 皇 彩 舍 壬 闻 吉 In ddV 和 doysoloud 5 


国 起 形 工具 | 
口 同 角 江 形 -入 
情 图 工具 


全 举世 开工 具 
/A 直 续 工 且 
目 定 形状 工 县 





图 2-13 选择 “和 扼 形 工具 ” 图 2-14 绘制 矩形 


A) 双击 “ 拢 形 1” 图 层 ， 在 打开 的 对 话 框 中 选择 “投影 ” 复 选 框 ， 并 设置 参数 ， 
如 图 2-15 所 示 。 

单 击 “确定 ”按钮 。 使 用 “ 拢 形 工 具 ”， 设 置 填充 颜色 为 #eeeeee， 绘 制 矩 形 ， 
0 如 图 2-16 所 示 。 
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Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 

































































































































笠 2 [确定 | 
结构 
et 
| 混合 模式 四) 正片 又 底 ~ 国 国 
而 回 (V) 
纹理 角度 (A): ( ,D5 度 器 使 用 全 局 光 (G) 
指 边 es 
= 距离 {0): [A 5 仅 索 
内 阴影 
大 小 (S): 8 I- 像素 
颜色 到 加 品质 
渐变 到 加 等 高 线 : 可 消除 锯齿 中 
图 案 又 加 Ld a 
辐 图 层 拉 空 投影 ( 





设置 为 默认 值 复位 为 默认 值 


























图 2-15 选择 “投影 ” 复 选 框 图 2-16 绘制 矩形 


@ 
提示 : 添加 “投影 ”的 方式 


也 可 以 在 “图 层 ” 面 板 底部 
单 击 “添加 图 层 样 式 ” 按 钮 ， 
在 展开 的 列表 中 选择 “投影 
选项 ， 如 图 2 一 17 所 示 。 


| READIMIORE 














图 2-17 选择 “投影 ”选项 


LO 使 用 “ 拢 形 工具 ”， 设置 填充 顾 色 为 杰 色 , 在 上 方 绘制 矩形 条 , 将 图 层 命名 为 “ 检 
I 色 ”， 如 图 2-18 所 示 。 
/A 按 Ctrl+J 组 合 键 两 次 ， 复 制 出 两 个 图 屋 ， 分 别 修 改 和 矩形 的 磊 色 为 黄色 和 绿色 ， 
之 后 调整 其 位 置 ， 如 图 2-19 所 示 。 





图 2-18 绘制 矩形 条 图 2-19 复制 矩形 并 修改 颜色 






提示 示 。 双击 形状 图 层 的 缩 览 
BR 四 在 弹出 的 “失色 BS ti 
取 新 的 颜色 。 形 状 图 层 的 缩 略 图 右 
TO 
志 ， 若 没有 该 标志 则 为 普通 图 层 ， 





READ MORE 





图 2-20 形状 图 层 的 标志 


0 “使 用 “椭圆 工具 ”绘制 椭圆， 将 图 层 命名 为 “相机 镜头 ”， 并 为 该 图 层 添加 “ 投 
影 ”图 层 样 式 ， 如 图 2-21 所 示 。 使 用 “椭圆 工具 ”绘制 大 小 不 等 、 颜 色 不 同 的 
3 个 同心 圆 ， 如 图 2-22 所 示 。 


混合 模式 (6): 正片 妥 底 ~ 国 国 
不 透明 度 (0): CS 20  % 








角度 (A): (!) 90 ” 度 回 使 用 全 局 光 (G) 


中 高 D): 5 一 5 像素 
扩展 Re 0 % 
大 小 (5): G5 0 一 像素 


品质 
等 高 线 : [A 器 湖 逐 据 上 (0 
杂 色 人 N): Cr 0 % 


可 图 层 控 空投 影 (J) 
[设置 为 默认 值 】 | 揽 位 为 默认 值 | 






































图 2-21 绘制 椭圆 图 2-22 绘制 圆 


人 继续 使 用 “椭圆 工具 ”绘制 两 个 小 圆 ， 如 图 2-23 所 示 。 在 最 上 方 和 最 下 方 边缘 
处 各 绘制 一 个 矩形 条 ， 分 别 将 图 层 命名 为 “上 横 线 ”和 “下 横 线 ”。 
O09 修改 “上 横 线 ” 图 层 的 “混合 模式 ”为 “和 柔 光 ”， 如 图 2-24 所 示 ， 完 成 效果 如 
图 2-25 所 示 。 
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图 2-23 绘制 两 个 小 圆 图 2-24 设置 混合 模式 图 2-25 完成 效果 
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2-26 图 标 


除 此 之 外 ， 界 面 边界 也 多 会 使 用 圆 角 算 形 ， 如 图 2-27 所 示 。 圆 角 和 矩形 的 边 角 半 径 的 
大 小 决定 了 圆 角 的 不 同 。 


ll CMCC 4G 


Santa Monica 


90 
is 5:45 ANM 


“人 8:10 PM 


Password: 
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South West 


Tomorrow 
Afternoon A Forgotten password? 


M Creat your account? 


图 2-27 界面 边界 








使 用 ' 圆 角 和 定形 工具 ”可 以 绘制 圆 角 定形 ;在 
APP 元 素 中 ， 圆 角 和 矩形 最 常见 的 应 用 就 是 制作 图 标 ， 





YOU ARE PLAYING BRIANNA K. i 
YoU EoF 
S92 + 


© Time: O01:13 
Average: 01:13 
Best: O01:13 


Intelligent: Streak 1 
A 







A 


Current Level: 10 


Current Badge: Africa 
OO = 本 泵 


ya Skirt, Clothes, Wear, Girl, Pants, 
Woman 














STRTC 






本 节 介 绍 使 用 “ 圆 角 和 矩形 工具 ”绘制 简易 的 图 标 ， 并 通过 设置 圆 角 半径 来 改变 圆 角 的 
大 小 。 制 作 流 程 图 如 图 2-28 所 示 。 


忆 。 国 矩形 工具 U 


国 圆 角 拒 形 工具 ，U 
i prs 
全 至 芝 形 工 


ee a 
且 ? 自 定形 杖 县 U 





图 2-28 制作 流程 


~ 制作 步骤 


“ 贺 角 得 形 工具” 
第 2 章 \2.1.1 简单 形状 \3. 圆 角 和 矩形 

















0 7 新 建文 档 ,在 工具 箱 中 按 住 “ 答 形 工具 ”, 在 展开 的 按钮 组 中 选择 “ 圆 角 和 矩形 工具 ”， 
如 图 2-29 所 示 。 

LA 在 选项 栏 中 单 击 “ 填 充 ” 右 侧 的 颜色 框 ， 在 展开 的 面板 中 吸取 颜色 ， 如 
< 一 图 2-30 所 示 ， 


酒 岂 晶 及 代 刁 阅 站 In ddv 放 dousol00d 已 RS 


PS 文件 IF) ” 编 筷 {日 ”图 像 四 ”图 层 届 ) 类 LV) ; 











= 国 | 汇 形 工 上 县 U 
国 图 角 拒 形 工具 ，U 
时 李 图 工具 U 
时 滩 芭 形 工 县 U 


E Ei 


时 





A 直 续 了 工 县 U 
革 ? 目 定 形 六 工具 UU 


加 
1 
1 
0 








MNFASMKNRODY 





图 2-29 选择 “ 圆 角 和 矩形 工具 ” 图 2-30 吸取 颜色 


Se 











7)》 在 画布 中 单 击 并 拖 动 所 标 ， 绘 制图 形 。 绘 制 后 弹出 “属性 ”面板 ， 在 “属性 ” 
面板 中 修改 宽 、 高 为 145 像素 ， 圆 角 半 径 为 45 像素 ， 如 图 2-31 所 示 。 修 改 后 


国耻 | =<| PE 
本 到 本 由 攻 | 
45 像 素 45 像 素 45 像 素 45 像 素 

口 口 
里 口 


呈 | 本 | 三 





图 2-31 设置 宽 高 及 圆 角 半径 图 2-32 圆 角 和 珑 形 





© 
提示 1: 单 击 “ 忆 性” I DB 提示 2: 在 使 用 圆 角 半径 绘 
的 “将 角 半 径 值 链接 在 一 起 ” 制 前 ， 也 可 以 直接 在 选项 栏 
按钮 ， 可 以 单独 设置 4 个 角 的 中 设置 帘 、 部 参数 和 所 有 的 
不 同 半 径 ， 如 图 2 一 33 所 示 。 圆 角 半径 ， 如 图 2 一 34 所 示 。 


器 |b 像 素 ||ss 艇 素 “| 站 


LS 


回 2 像素 “||24 像 素 “| 加 





图 2-33 单独 设置 4 个 角 的 不 同 半径 


PS 文件 (F) 编辑 (日 ”图 像 四 ”图 层 (L) 类 型 (Y) 选择 (S$) 法 漠 由 视图 IV 窗口 (W) ”帮助 (H) 


Om -|W 站 EEC 4 [古人 











psd7958.psd @ 100% (DIAL, RGB/8)* x =e ee 下 


图 2-34 在 选项 栏 中 设置 


0 使 用 “和 矩形 工具 ”， 设 置 填充 闫 色 为 和 白色， 绘制 一 个 矩形 条 
复制 两 个 ， 调 整 位 置 ， 如 图 2-35 所 示 。 选 择 “ 椭 圆 工 具 ”,， 
整 位 置 ， 如 图 2-36 所 示 。 


@ 国 


图 2-36 绘制 


图 2-35 绘制 矩形 条 并 复制 


择 刁 。” 赎 筷 个 视 疼 岂 窗口 (W) 帮助 (H 


是 示 : 使 用 “移动 工具 ” 选 

尘 5 个 和 矩形 条 ， 在 选项 栏 中 
Ml “垂直 居中 分 布 ” 按 鱼 ， 
可 将 其 按 同 等 间 孙 分 布 ， 如 





| 





At 汗 者 动 
2 


调 


图 257 所 示 . a i 


READIMORE | 





图 2-37 单 击 “垂直 居中 分 布 ” 按 钮 


0 / 太 再 次 绘制 一 个 国 ， 设 置 颜色 为 蓝 色 ， 将 圆心 对 齐 ， 如 图 2-38 所 示 。 选择 两 个 国 ， 


按 Alt 键 拖 动 复制 ， 并 调整 位 置 ， 如 图 2-39 所 示 。 





图 2-38 绘制 圆 图 2-39 复制 图 


CC 椭圆 矩形 

李 圆 矩形 不 是 常规 图 形 ， 它 是 由 圆 
角 和 矩形 演变 而 来 的 ， 介 于 圆 和 圆 角 和 矩 形 
中 间 ， 是 主题 图 标 最 流行 的 形状 之 一 ， 
如 图 2-40 所 示 。 





可 对 齐 贺 心 。 


图 2-40 椭圆 矩形 图 标 


提示 : 使 用 “移动 工具 ” 
选择 两 个 贺 ， 在 选项 栏 中 单 
击 “ 重 直 居 中 分 布 ” 按 钮 和 

“水 平 居中 分 布 ” 按 钮 ， 





© 
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Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 


设计 思路 


绘制 顶 圆 矩形 的 方法 有 多 种 ， 可 以 使 用 “ 圆 角 矩形 工具 ”绘制 图 形 后 通过 调整 得 到 ， 
也 可 以 使 用 “多 边 形 工具 ”直接 绘制 。 本 节 使 用 “多 边 形 工 具 ”， 并 在 选项 栏 中 设置 参数 ， 
绘制 出 椭圆 矩形 的 图 标 ， 制 作 流程 如 图 2-41 所 示 。 











中 ， 国 和 ER 工具 
国 贺 用 拒 形 工 且 Tuesday 
全 情 贺 工 县 


图 多 边 形 工具 
/直线 有 后 





车 8 目 定 形 并 工具 


2-41 制作 流程 


制作 步 又 


知识 点 “多 边 形 工具 ” 
光盘 路 径 第 2 章 \2.1.1 简单 形状 \4. 椭圆 矩形 

















0 7 打开 Photoshop， 执 行 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 对 话 框 设 置 宽度 和 高 
度 参数 ， 如 图 2-42 所 示 。 

LA 单 击 “确定 ”按钮 新 建文 档 并 填充 画布 为 蓝 色 。 在 左 侧 的 工具 箱 中 选择 “多 边 
一 形 工具 ”| 全 |， 如 图 2-43 所 示 。 























新 建 
如 
2 柜 形 工 上 县 
一 预 设 (P): 自 定 -i 图 前 窟 形 工 上 县 
大 小 (1); 目 
宽度 (W): 600 像素 ~ 旺 除 预 设 (D).…. ke 
高 度 (H): 600| 像素 CY 2 辽 形 工 且 
分 半 训 (R): 72 像素 贰 十 2 直线 3 上 
颜色 模式 (M): RGB 颜色 v 8 位 本 自 定 形状 工 且 
背景 内 容 (C): 白色 M 
图 像 大 小 : 
人 高 级 1.03M 
颜色 配置 文件 (D): sRGB IEC61966-2.1 
像素 长 宽 比 (X): 方形 像素 
图 2-42 新 建文 档 图 2-43 选择 “多 边 形 工具 ” 
7 在 选项 栏 中 设置 “ 边 ” 为 4 并 填充 颜色 为 灰色 ， 然 后 单 击 左 侧 的 [ 忒 按钮， 如 
图 2-44 所 示 ， 


PS 文件 (F) 编辑 (日 、 图 像 四 ”图 技 (L) 类 型 Y) 选择 (9 读 注 中 视图 窗口 (W) 帮助 (H) 
| : 口 对 济 边 媒 


禄 圆 滤 形 .psd @ 110% (Clock, RGB/8)* x 





图 2-44 单 击 按 钮 


() 





> + 全 忆 雹 | 国 思 fT 可 对 语 边 如 


展开 后 选中 “平滑 拐角 ” 复 选 框 ， 如 图 2-45 所 示 。 在 画面 中 间 按 住 Shift 键 即 


可 绘制 椭圆 矩形 ， 如 图 2-46 所 示 。 





图 2-45 选中 “平滑 拐角 ” 复 选 框 图 2-46 绘制 椭圆 矩形 





L]O 将 图 层 命名 为 “ 底 1”， 复 制图 层 ， 修 改 图 层 名 称 为 “ 底 2”， 修 改 图 形 颜色 为 


浅 灰 色 ， 按 Ctrl+T 组 合 键 将 其 向 上 压缩 一 点 ， 如 图 2-47 所 示 。 


/人 继续 复制 图 层 , 修改 图 层 名 称 为 “ 底 3”. 双击 图 层 缩 览 图 , 修改 填充 顾 色 为 白色 ， 


06 再 压缩 一 点 ， 如 图 2-48 所 示 。 


() 








图 2-47 复制 并 修改 图 2-48 再 次 修改 


”使 用 “矩形 工具 ”绘制 两 个 算 形 ， 如 图 2-49 所 示 。 依 次 按 住 Alt 键 单 击 两 个 图 


层 之 间 ， 创 建 前 贴 壹 版， 如 图 2-50 所 示 。 


图 2-49 绘制 矩形 图 2-50 创建 剪贴 蒙 版 
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Photoshop 热门 DpP* 2 A 


S ME Te 4 ol da 
图 层 添 加 “投影 ”图 层 样 式 ， 效 果 如 图 2-52 所 示 。 


混合 模式 (8): 正常 ~ 加 加 
Tuesday 站 Tuesday 
角度 (A): 上 | 50 度 回 使 用 全 局 光 (G) 
距离 D): 二 1 你 素 
扩展 (R): G 0 % 
大 小 (5): 5 0 ”像素 
等 高 线 : | - 丫 消 除 锯 频 Q 
杂 色 (N): 。 % 
园 图 层 控 空 投影 (JU) 
| 设置 为 默认 值 “| | 复位 为 默认 值 | 


图 2-51 输入 文字 图 2-52 完成 效果 


BB iS 国 形 


我 们 知道 ， 在 APP 界面 中 ， et i en 算 形 和 
形 看 似 很 复杂 ， 但 都 是 使 用 各 种 不 同 的 形状 进行 适当 的 组 合 得 到 的 。 





























SWEET 


本 节 结 合 使 用 多 个 工具 ， 绎 制 一 个 同时 包含 圆 角 和 矩形 、 圆 形 与 三 角形 的 图 标 ， 制 作 流 
程 如 图 2 一 D3 所 示 。 


| 


图 2-53 制作 流程 图 








5 制作 步骤 


“加 生息 形 工具 ”“ 梢 贺 工 具 ”“ 自 定形 伏 工具 ” 
光盘 路 径 第 2 章 \2.12 组 合 图 形 

























































































7 新 建文 档 ， 选 择 “ 圆 角 珑 形 工具 ”， 在 选项 栏 中 单 击 “ 填 充 ” 后 的 颜色 ， 在 展 
开 的 面板 中 单 击 “渐变 ”按钮 ， 然 后 在 下 方 单 击 色 标 ， 修 改 颜 和 色 ， 并 修改 旋转 
渐变 角度 为 -90。 ， 如 图 2-54 所 示 。 在 画布 中 绘制 圆 角 矩形， 如 图 2-55 所 示 。 
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(}2 


PSs 文件 (F) 编辑 (日 ”图 像 四 ”图 层 (L) 关 型 Y) 选择 (: 


< 上 填充 二 | 护 b:[ [3 点 


Na 

















图 2-54 设置 选项 栏 
使 用 “椭圆 工具 ”， 设 置 填充 
颜色 为 蓝 色 ， 按 住 Shift 键 绘 
? 如 图 pel je 





2-56 绘制 正 圆 


生命 名 形状 
仅 文本 
小 缠 电 图 

大 纺 览 图 
小 列表 








太 列 表 



































图 2-58 选择 “全 部 ”选项 


() 


拉 列 表 中 选择 “全 部 "选项 ， 


Adobe Photoshop 
\ 是 否 用 全 部 中 的 形状 蔡 换 当前 的 形 械 ? 








2-55 绘制 圆 角 和 矩 形 


77》 在 工具 
yy EY 


? 如 图 2 一 ?97 Ti 










国 拒 形 工具 
贺 角 拒 形 工具 
”人 
全 务 芝 开工 

ES ai 
中” 自 定形 六 
















图 2-57 选择 “ 自 定形 状 工具 ” 


箱 中 选择 “ 自 定形 状 工 


在 选项 栏 中 单 击 有 形状， 展开 面 
板 ， 单 击 “ 设 置 ” 按 钮 ， 在 下 
如 图 2-58 所 示 。 


jl 弹出 对 话 框 , 单 击 “ 确 定 ” 按 钮 ， 


LO 如 图 2-59 所 示 。 


图 2-59 单 击 “ 确 定 ” 按 钮 
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泗 册 户 阿 又 卫生 区 IN dd 所 dousol0dd 3: 








更 哆 ZU Photoshop 热门 命 PP 类 型 设计 从 入 门 到 精通 
OR 





O06 > A 4 da | A 0 
ne 


(OO 形 边框 ”， 和 如 图 2_60 所 示 ， 


你 桨 ”刑天 :| 全) 日 呵 对 半边 强 














图 2-60 选择 “ 窒 边 圆 形 边 框 ” 图 2-61 绘制 图 形 
lD 选择 “ 自 定 形状 工具 ”， 在 选 Aie 在 画布 中 绘制 图 形 ， 并 将 其 旋 
项 栏 中 选择 形状 “标志 3”， WA 转 ， 如 图 2-63 所 示 ， 


图 [2 庆 1 
i 
加 四 1323 关 ， 
X 入 鹤 心 鸭 全 








图 2-63 绘制 图 形 





布尔 是 英国 的 数学 家 ， 他 在 1847 年 
发 明了 处 理 二 值 之 间 关 系 的 逻辑 数学 计算 
法 ， 包 括 联合 、 相 交 、 相 减 。 在 图 形 处 理 
操作 中 引用 了 这 种 逻辑 运算 方法 ， 以 使 简 
单 的 基本 图 形 组 合 产 生 新 的 形体 ， 被 称 为 

“布尔 运算 ”， 如 图 2-64 所 示 。 


图 2-64 布尔 运算 








“设计 思路 


布尔 运算 在 Photoshop 中 是 通过 路 径 的 操作 实现 的 ， 包 括 “ 合 并 形状 ”“ 减 去 顶层 
形状 ”“ 与 形状 区 域 相 交 ”“ 排 除 重 又 形状 ”“ 合 并 形状 组 件 ”。 通 过 路 径 的 操作 来 显示 
结果 ， 并 且 不 会 对 原 有 路 径 进行 破坏 。 本 闻 将 通过 使 用 不 同 的 工具 绘制 路 径 ， 对 路 径 进 行 
这 些 操作 ， 实 现 Wi-Fi 图 标的 绘制 。 制 作 流程 如 图 2-65 所 示 。 


1 





2-65 制作 流程 图 


全 
“制作 步 又 
知识 点 路 径 操作 


(OA ee en 
条 | 按 钮 ， 选 择 “ 固 定 大 小 ” 单 选 按钮 ， 并 设置 宽 、 高 为 200 像素 ， 选 中 “从 中 
心 ” 复 选 框 ， 如 图 2-67 所 示 ， 


园 拒 形 工 且 

里 图 角 拒 形 工具 
ai) 椭圆 工 且 |、 
全 芭 芝 形 工 

pd 直线 I 具 
三 目 定 形状 工具 


















泗 册 户 阿 又 卫生 区 IN ddv 任 dodsolodd 攻 fne: 


” 尼 :+ 车 医治 本 世相 
中 下 可 的 蒜 
O 图 (经 制 直径 或 半径 ) 





= 






I 和 





图 2-66 选择 “椭圆 工具 ” 2-67 设置 
02 在 画布 中 绘制 正 圆 ， 如 图 2-68 所 示 。 在 工具 箱 中 选择 “路 径 选 择 工 具 ”， 如 
图 2-69 所 示 。 


eg 


< ee 





图 2-68 绘制 正 圆 
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Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 


ZL 选择 贺 ， 按 Ct1+C 组 合 键 复 制 ， 按 Ctr1l+V 组 合 键 粘贴 。 然 后 按 Ctrl+T 组 合 键 
7 进行 自由 变换 ， 按 住 Shift+Alt 组 合 键 从 中 心 等 比例 缩小 ， 如 图 2-70 所 示 。 
0 将 圆 的 直径 缩小 20 像素 , 也 就 是 宽 、 高 为 180 像 素 , 在 “属性 ”面板 中 可 以 查看 ， 
在 手动 无 法 精准 调 到 该 数值 时 也 可 以 在 “属性 ”面板 中 设置 ， 如 图 2-71 所 示 。 


























* . 
F 一 一 一 [= 一 ~ 总 本 
Ed[L 点 “| | 王 ] 提示 : 设置 究 高 参数 
区 :|[ 和 ”: 咱 区 :| 前 ， 单 击 中 间 的 “链接 
| 里 是 | 是 | 形状 的 宽度 和 高 度 ” 按 
钮 回 . 
图 2-70 复制 圆 并 缩小 图 2-71 设置 


6 页 在 选项 栏 中 单 击 “路 径 操作 ”按钮 ， 如 图 2-72 所 示 。 


Ps 文件 [F) ” 编 续 上 昌 ”图像 人 ”图 层 山 ” 灶 型 Y) 选择 ( 引 ”说 第 由 ”视图 IV) 窗口 (W) 帮助 (H) 


和 -| 语序:| -| 措 连 :| 二 3 点 | | 一 一 中 时 2 市 色 Hr |200 多 

















图 2-72 单 击 “ 路 径 操作 ”按钮 


LO 在 展开 的 选项 中 选择 “ 减 去 顶 OF 此 时 得 到 如 图 2-74 所 示 的 图 


O 层 形状 ” 选项, 如 图 2-73 所 示 。 形 效 采 .。 


加 局 培  [ 忆 对 这 
| 。 上 新 建 图 层 





2-73 选择 “ 减 去 顶层 形状 ”选项 2-74 图 形 效果 





人 用 同样 的 方法 ， 继 续 复制 贺 ， O09 再 次 在 选项 栏 中 设置 “合并 形 
Be Oe a A ee 
a 图 2-76 所 示 ， 


[Yi 对 济 边 澡 





2—75 复制 圆 并 缩小 2-76 设置 “合并 形状 ” 


70) 再 次 复制 并 缩小 20 像 系 ， 设置“ 减 去 顶层 形状 ”， 如 图 2-77 所 示 。 





区 + 多 [Yi 对 神 边 绢 





2-77 减 去 顶层 形状 


前 面 的 操作 ， 如 图 2-78 所 示 。 


SN 
SN 
bah 
Xo 





2-78 重复 前 面 操作 
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在 工具 箱 中 选择 
图 2-80 所 示 。 


国 皂 形 工 县 


加 十 汇 形 工 县 
和 情 图 工 上 县 

全 备 芝 形 工 且 
”直线 工具 
上 目 定 形 并 工 县 











2-79 选择 “和 矩形 工具 ” 2-80 绘制 正方 形 


7 YJ) 按 Ctrl+T 组 合 键 变形 正方 形 ， 按 住 Shift 键 旋 转 45”， 如 图 2-81 所 示 。 然 后 
将 其 调整 到 圆 的 上 方 ， 如 图 2-82 所 示 ， 





图 2-81 旋转 图 2-82 调整 到 圆 上 方 


A 在 选项 栏 中 设置 为 “与 形状 区 域 相交 ”， 如 图 2-83 所 示 。 此 时 的 图 形 如 
/ 图 2-84 所 示 。 双 击 该 图 层 缩 览 图 ， 可 以 在 打开 的 “ 拾 色 器 ”中 修改 为 任 


意 顾 色 ， 完 成 效果 如 图 2-85 所 示 。 


心 > 





到 尼 六 | 区 Mi 
四 新 建 图 后 





> - 
A/ vc 一 x Ww 
天 一 人 wn NA 
fy r -一 7 一 N 
/ ” -一 NA 
\ NA 
/ NS \ \ 


I 
A 
全 | | 


| | 1 /i | | mb | 
| 
【4 | | | 
[1 :tii 
VV a FM i | 
\ :i 
WANWA ; ss, 
\ 、 71/ 
\ i _ 1 1 
SS pi 
/ 
pA 
A 
A 











图 2-84 图 形 效 果 图 2-85 完成 效果 


图 2-83 设置 为 “与 形状 区 域 相 交 ” 


APP UI 设计 中 的 光影 处 理 


光影 效果 能 体现 出 物体 的 立体 感 和 质感 ， 在 Photoshop 中 光 
ww | 影 的 处 理 主要 是 通过 图 层 样 式 来 实现 的 。 本 节 将 学 习 APP UI 设计 
中 的 光影 处 理 。 





(EEDPhotoshop 的 图 层 样 式 


0M 混合 选项 

i ihn 到 的 第 一 个 设置 面板 ， 包 括 : 常规 混合 、 高 级 混 
合 、 混 合 颜色 天 3 个 大 的 功能 这 些 功能 区 会 影响 后 面 的 图 层 样 了 式 总 体 效 果 。 学 会 其 中 
的 设置 是 非常 必要 的 。 


加 斜面 和 浮 除 
打开 一 个 按钮 ， 为 按钮 添加 “和 斜面 和 浮雕 ”图 层 样 式 ， 如 图 2-86 所 示 。 添 加 图 层 样 
式 后 的 效果 如 图 2-87 所 示 。 


和 斜面 和 浮雕 
结构 


样式 mM): 内 斜面 
方法 (Q): 平滑 
深度 (D): ZS 
方向 : 加 上 下 
大 小 (z): 到 
软化 中 ): 一 去 
阴影 
角度 (WY): 亏 120 度 
(*] 区 ee 
高 度 : 一 度 


光泽 等 高 线 : Pe [| 消除 锯齿 人) 


MIN MAX 高 光 模式 (H): 小 色 MIN MAX 
不 透明 度 (0O): 75  % 
阴影 模式 (A): 正片 县 底 ~ Ol 
不 透明 度 (OC): 27 % 























| 设置 为 默认 值 。] | 复位 为 默认 值 | 


图 2-86 添加 “和 斜面 和 浮雕 ”图 层 样 式 图 2-87 添加 图 层 样 式 后 的 效果 


“ 笠 面 和 浮 膨 ”图 层 样 取 包 括 内 斜面、 外 笠 面 、 浮 有 雕 、 枕 形 浮 膨 和 描 边 浮 膨 5 个 图 层 
样式 ， 如 图 2-88 所 示 。 虽 然 每 一 项 中 包含 的 设置 选项 都 是 一 样 的 ， 但 是 制作 出 来 的 效果 
却 大 相 径 庭 。 

“ 笠 面 和 浮 有 ”图 层 样式 设置 参数 包括 “结构 ”和 “阴影 ”两 部 分 。 通 过 这 些 设置 ， 
我 们 可 以 控制 浮雕 的 类 型 、 立 体面 的 幅度 、 高 光 及 暗部 的 颜色 等 ， 做 出 立体 感 和 质感 较 强 
































的 图 形 。 届 
在 图 层 符 陈 对 样式 中 ): 计 $8: | "| 口 洛 ia 上 0 
话 框 左 侧 的 “样式 ”下 mu 全 -一 一 
拉 列 表 中 ，“ 和 斜面 和 浮 。 | “<< ls 
腑 "| 咎 六 包 仿 甸 上 等 高 | | 深度 0 |; 
线 ” 和 “纹理 ”两 个 复 万]: Ra 
选 框 , 如 图 2-89 所 示 。 大 ,小 (2z): x 
图 2-88 5 个 图 层 样式 图 2-89 “等 高 线 ” 和 “纹理 ” 复 选 杠 
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纹理 : ny 0 





国 内 阴影 
如 图 2-90 所 示 , 为 对 象 添加 “内 阴影 " 图 层 样式 后 ， ln 内 容 的 边缘 添加 阴影 
使 图 层 具 有 凹陷 的 感觉 。 在 设计 APP UI 元 素 时 为 了 体现 凹陷 的 质感 , 通常 会 用 到 “内 阴影 ” 


图 层 样 式 。 








图 2-90 添加 “内 阴影 ”图 层 样式 的 前 后 对 比 


如 图 2-91 | 为 对 象 添加 “投影 ”图 层 样 式 后 ， 在 对 象 的 下 方 出 现 了 一 个 和 图 像 
内 容 相同 的 “ 影 。 在 “投影 ”图 层 样式 中 可 以 设置 影子 的 方向 、 距 离 、 大 小 等 。 











投影 
结构 
混合 模式 (6) 正片 琶 底 ~ 国 国 
不 透明 度 (D): 国 |% 
| 
角度 (A): | ， | 50 ” 度 回 使 用 全 局 光 (G) 
© ) @ 
8 高 D): 一 一 一 一 一 18 ”像素 
扩展 R): c= 二 一 0。  % 
大 小 (5S): PP 10 像素 
品质 
高 线 : | "| 器 5 上 0 
杂 色 MLC 0  % 
周 图 层 挖 空 投影 (U) 





[设置 为 默认 值 。| [ 复位 为 默认 值 











图 2-91 添加 “投影 ”图 层 样 式 的 前 后 对 比 
国内 发 光 
如 图 2-92 所 示 , 为 对 象 添加 内 发 光 "图 层 样 陈 后 ,该 对 象 内 侧 边缘 形成 一 种 发 光 效 果 。 





























内 发 光 
结构 
混合 模式 (6): 正片 亚 底 ~ 
不 透明 度 (O): 国 |% 
杂 色 (N): (5 0 % 
OO 图 
图 素 
方法 (9): 柔和 ~ 
源 : 介 居中 但 ”加 边缘 (6) 
阻塞 (0): 人 0 % 
pd 7 20 像素 
品质 
等 高 线 : [4 问 消除 刀具 人 
范围 (R): Z5 45 % 
抖动 0): G 0 % 
| 设置 为 默认 值 “」 | 复位 为 上 默认 值 | 

















图 2-92 添加 “内 发 光 ” 图 层 样 式 的 前 后 对 比 


国外 发 光 
如 图 2-93 所 示 , 为 对 象 添 加 “外 发 区 图 层 样 陈 后 , 该 对 象 边 绿 外 侧 形 成 发 光 的 效果 。 
外 发 光 
结构 
温 合 模 式 (E): 县 加 Wd 
不 透明 度 (O): 园 I% 
杂 色 (N): G 0 % 
5 | | 
图 素 
方法 (Q@): 杀 和 ~ 
扩展 (P): 和 2 % 
大 小 (5): 里 5 像素 
品质 
Ss: | -| 回 消 Sla 上 0 
Lana Del Rey ee | 二 & Lana Del Rey 
三 三 This Is What Makes Us Girls 拉 翅 0): - 三 三 This Is What Makes Us Girls 
] las | 设置 为 默认 值 | | 复位 为 默认 值 | 1:35 | 3:43 


















































图 2-93 添加 “内 发 光 ” 图 层 样 式 的 前 后 对 比 
在 “外 发 光 ” 图 层 样式 的 设置 界面 中 包含 3 组 参数 。 


结构 :用 于 设置 外 发 光 的 颜色 


提示 : 在 Photoshop 中 ， 每 个 图 


和 光照 强度 等 属性 。 层 样式 的 “角度 ” 劳 者 有 一 个 “使 
图 素 : 用 于 设置 光芒 的 大 小 。 We rl 

选 框 后 能 保证 创造 的 光影 都 在 
品质 : 用 于 设置 外 发 光 效 果 的 J 


细 书 。 





READINMORE 


《四 渐变 到 加 

如 图 2-94 所 示 ， 为 对 象 应 用 “渐变 到 加 ”图 层 样式 后 ， 该 对 象 实现 了 金属 人 入 
“渐变 又 加 ”图 层 样式 一 般 用 于 为 对 象 进行 渐变 色 的 覆盖 ， 通 过 Wo 明度 
来 实现 与 原 对 象 闫 色 的 湿 | 量 舍 O 





新 变 到 加 
渐变 
混合 模式 (Oo): 正常 ~ 回访 色 
不 透明 度 (P); 人 园 |% 
新 变 : 反 向 (R) 
样式 (): 角度 ~ 轩 与 图 层 对 齐名 
角度 (N): | 150 度 


缩放 (S): 全 100 % 








| 设置 为 默认 值 | | 复位 为 默认 值 | 








2-94 添加 “渐变 琶 加 ”图 层 样 式 的 前 后 对 比 


人 PE 立体 效果 


要 表现 出 立体 效果 ， 就 需要 设置 对 象 的 高 光 与 阴 影 ， 处 理 图 像 的 明暗 关系 。 





设计 思路 


和 是 立体 效果 图 标的 绘制 ， 通 过 “投影 ”“ 内 阴影 ”等 图 层 样式 来 实现 图 
标的 阴影 效果 ， 通 过 “渐变 硬 加 ”图 层 样 式 表 现 明暗， 制作 流程 如 图 2-95 所 示 。 


4/ 
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Photoshop 热门 HPP 类 型 设计 从 入 1 到 精通 





图 2-95 制作 流程 
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ET 


知识 点 图 层 样式 
光盘 路 径 第 2 章 \2.2.2 立体 效果 


(7 


()2 


图 层 样 式 





新 建文 档 ， 使 用 “ 圆 角 和 矩形 工具 ”绘制 圆 角 和 矩 形 ， 重 命名 图 层 为 “阴影 ”， 如 
图 2-96 所 示 。 为 “阴影 ”图 层 添 加 “投影 ”图 层 样 式 ， 如 图 2-97 所 示 。 
投影 

结构 

混合 模式 (6): 正片 县 底 ~ 国 国 


不 透明 度 (0): 30  % 


角度 :人 | | 一度 辐 使 用 全 局 光 ( 











IE 高 DO): 证 1 像素 

扩展 人 ie 0 % 

大 小 (5): = | 20 像素 
图 2-96 绘制 圆 角 和 矩形 图 2-97 添加 “投影 ”图 层 样式 


添加 图 层 样 式 后 的 矩形 效果 如 图 2-98 所 示 。 复制 图 层 , 修改 图 层 名 称 为 “时 钟 ”， 
清除 图 层 样 式 ， 双 击 缩 略 图 修改 天 形 颜 色 ， 如 图 2-99 所 示 。 


提示 。 选择 图 层 ， 单 击 筷 标 右键 ， 9 


选择 “清除 图 层 样 式 ” 命 令 即 可 将 
所 有 图 层 样 式 删 除 ; 直接 选择 图 层 上 
的 样式 ， 拖 动 到 “图 层 ”面板 底部 的 
耕 按钮 上 可 删除 单个 图 层 样式 。 


| READ MORE | 





图 2-98 和 矩形 效果 图 2-99 修改 矩形 颜色 


《2 选择 “时 钟 ” 图 层 ， 单 击 和 鼠标 右键 ， 选择 “转换 为 智能 对 象 ” 命 令 ， 如 


(4 


8 


图 2-100 所 示 。 
双击 进入 智能 对 象 ， 为 图 层 添 加 “斜面 和 浮雕”“ 内 阴影 ”和 “渐变 登 加 ”图 
层 样 式 ， 如 图 2-101 所 示 。 

















从 图 层 建立 组 .. 
通过 拷贝 j 委 
编辑 内 容 

导出 内 容 .. 

车 换 内 容 .…. 


栅 格 化 图 层 


栅 客 化 图 层 样 式 





介面 和 学 由 
样式 0: 内 负面 。 ~ 
方法 Qj: 平时 。 








深度 D): < 100 % 
方向 : 加 上 下 

大 小 站 : < 去 13 ”像素 

软化 人 ): 0 像素 





阴影 


角度 (VY: 、90 度 
* 」 团 使 用 全 局 光 (G) 
度 





高 度 : 一 30 尽 
光泽 等 高 线 : | S| 器 湖 估 申 ( 
高 光 模 式 (H): 渡 色 ~ 
不 透明 度 (D): Zs 75 % 
阴影 模式 (A): 正片 一 底 -En 
不 透明 度 (QO: = 21 % 








| 设置 为 默认 值 _| |[ 复位 为 默认 值 | 








内 阴影 














结构 
混合 模式 (6): 正常 M 
不 透明 度 (0O): 75 
角度 (A): | 机 
距离 {0D): 三 5 
阻塞 (0): 4 0 
大 小 (5): 儒 5 
品质 


二: | -| 口 潮 杀 锯 贞 


杂 色 (N): (= 0 


度 回 使 用 全 局 光 (G) 


渐变 县 加 
渐变 
混合 模式 (0O): 正常 v 回 仿 色 
不 透明 度 (P): 100  % 





:[ | 


像素 








区 样式 (): 线性 ”加 与 图 层 对 齐 [ 
入 雪 角度 NW): (| ) 0 度 

缩放 (85): - 二 100  % 
% |_ 设置 为 默认 值 “| | 复位 为 默认 值 | 








| 设置 为 默认 值 _| | 复位 为 默认 值 | 














图 2-100 执行 命令 


05 


图 2-102 图 像 效果 


Or 


确定 操作 后 的 图 像 效 采 如 图 
pO 


图 2-101 添加 图 层 样 式 





一 摄影 - 





























一 结构 




















混合 模式 思 ， 正常 
不 表明 度 (oj: 一 2 一 万 
角度 :| | -50 。 度 门 使 用 全 局 Xf(6) 


es - 


中 高 DD): 二 5 


扩展 人 :全 0 


Ett 


~ 国 国 





号 


者 素 
听 


远 索 

















图 2-104 设置 “投影 ”图 层 样式 


LS 复制 图 层 ， 重 命名 为 “里 圈 ”， 修 改 图 层 样式 ， 如 图 2-106 所 示 。 











内 阴影 渐变 亚 加 
人 新 变 
间 会 模 下 fp 志 
呈 合 模式 (6): 正片 到 底 [| 混合 模式 (o): 
不 透明 度 D): Ce 42  % 
不 衣 明 度 ): 
角度 (A): | * | 90 度 加 使 用 全 局 光 (G) 
距离 (D): CO 17 像素 样式 (0): 
阻塞 (0: 5 0 % 





大 小 (5S): 一 29 像素 
品质 


等 高 线 ; -| | 消除 锯齿 (0) 


杂 色 人: . 0 % 








| 设置 为 默认 值 。] | 复位 为 默认 值 | 





缩放 (S): 


正常 





浙 妆 [| | © 反 向 () 


线性 


角度 (N): | | | 90 度 





v 回访 色 
100 % 


回 与 图 层 对 齐 包 


100 % 





| 设置 为 上 默认 值 | | 复位 为 默认 值 | 














图 2-106 修改 图 层 样 式 


A 使 用 “椭圆 工具 ”绘制 一 个 正 


LDO 圆 形 ， 如 图 2-103 所 示 . 





图 2-103 绘制 正 圆 形 


修改 图 层 名 称 为 “投影 ”， 双 击 图 层 ， 在 打开 的 对 话 框 中 设置 “投影 ”图 层 样式 ， 
如 图 2-104 所 示 。 确 定 操作 后 的 图 像 效 果 如 图 2-105 所 示 。 





图 2-105 图 像 效 果 














投影 

结构 

温 合 模式 (6): 正常 M4 

不 透明 度 (D): z 100 % 
角度 :| ， | 90 度 回 使 用 全 局 光 (G) 
距 高 DO): 二 8 像素 
扩展 (R): G 0 % 
大 小 (5): 3 10 像素 
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行 旋转 ， 修 改 图 层 名 称 为 “分 针 ” 





图 2-107 图 像 效果 


7L/ 


EE 2 0 ores 




















斜面 和 浮雕 
结构 
样式 (TD): 内 笑 面 ~ 
方法 (Q): 平滑 ~ 
深度 D): 5 100 。” 驳 
方向 : @ 上 TB 
大 小 (D: 本 7 ”像素 
软化 FF): 0 ”像素 
阴影 
i os 90 度 
* | 团 使 用 全 局 光 (6) 
30 度 
光泽 等 高 线 ; 4- 问 消 脓 锯 具 ( 
高 光 模式 (H): 源 色 ~ 
不 透明 度 (D): Zz 75 % 
阴影 模式 (A)， 正片 县 底 ~ 国 国 
不 透明 度 (C): 一 19 % 
|_ 设置 为 默认 值 _| | 复位 为 默认 值 | 
































如 图 2-108 所 示 。 





选择 Pe 图 上 为 图 层 添加 “斜面 和 浮雕” 
2-109 所 示 。 复 制图 层 样式 到 “时 针 ” 图 层 上 ， 并 修改 “投影 ”图 层 样式 ， 如 





投影 
结构 
混合 模式 (6) 正常 ~ 加 天 
不 透明 度 (0): 30  %% 
角度 (A): | / ) 5 度 回 使 用 全 局 光 (G) 
距离 上): Z5 52 像素 
扩展 (R): < 0  % 
太 小 (5): 如 伏 素 
品质 
等 高 线 : - 回 消除 乞 具 人 
杂 色 (N): 人 % 
团 图 层 挖 空投 影 (U) 
| 设置 为 默认 值 “| | 复位 为 默认 值 | 
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图 2-111 图 像 效果 
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图 2-109 添加 图 层 样式 


的 图 像 效 果 如 图 2-111 所 示 。 绘 制 一 个 圆 ， 








单 击 “确定 ”按钮 关闭 对 话 框 ， 图 像 效果 如 图 2-107 所 示 。 使 用 “ 圆 角 和 矩形 工具 ” 
绘制 园 角 矩形 ， 并 旋转 图 形 ， 将 图 层 命名 为 “时 针 ”. 


再 次 绘制 圆 角 和 矩形 并 进 











图 2-108 绘制 圆 角 和 矩 形 
| | 图 层 样 式 ， 如 图 














投影 
结构 
混合 模式 (6)， 正常 | 
不 透明 度 (D); % 
角度 (A): “110 ” 度 回 使 有 全 局 光 (G) 
距离 {DO): 30 像素 
扩展 R): C= 0 % 
大 小 (5): 和 0 ”像素 
品质 
等 高 线 : - 问 消除 据 齿 () 
杂 色 (N): (5 % 
团 图 层 挖 空 投影 (U) 





| 设置 为 默认 值 | | 复位 为 默认 值 | 

















投影 











结构 
混合 模式 (6): 正片 又 底 ~ 国 国 
不 透明 度 (o): 
角度 (A): | 上 | 如 度 贱 使 用 全 局 光 (G) 
距 高 D): 一 五 像素 
扩展 人 R): 65 0 % 
大 小 (5): 36 像素 











图 2-110 修改 “投影 ”图 层 样式 


为 图 技 沭 加 “投影 ”图 





图 2-112 添加 “投影 ”图 层 样 式 








Wi 复制 图 层 ， 修 改 图 层 样式 ， 如 图 2-113 所 示 。 




















内 阴影 

结构 

混合 模式 (6): 正常 M 

不 透明 度 (D): Z5 75 % 
角度 (A): ( |) 56 度 回 使 用 全 局 光 (G) 
距离 D): 里 5 像素 
阻塞 (C): 4 0 % 
大 小 (5): 本 5 像素 

品质 
和 | - 辐 消除 锯 频 人) 
杂 色 (N): 4 0 % 








| _ 设置 为 默认 值 | | 复位 为 默认 值 | 









































新 变 要 加 SE 
源 a 
l | 一 9 混合 模式 (8): 正片 县 底 ~ 国 国 
混合 模式 (D): 正常 ”有 图 伪 色 不 透明 度 (o): 一 20  % 
] 秃 日 - aa 100 36 全 
不 透 全 ee 角度 (A): | | ) ” 度 同 使 用 全 局 光 (G) 
| PR 一 
要 距离 (0): < 二 10 像素 
样式 人: 线性 v 辐 与 图 层 对 齐名 扩展 QR): C= 一 0 % 
角度 MW: 上 1 8 度 a 
a 品质 
绵 放 (5): zs 100  % 
放 人 ) 全 党 线 | - 回 水 用 据 齿 () 
设置 为 默认 值 复位 为 默认 值 杂 色 (N): G © 2 
团 图 层 挖 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
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图 2-113 修改 图 层 样 式 
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图 2-114 图 像 效 果 


重 命名 图 层 为 “秒针 ”， 为 图 层 添 加 “斜面 和 浮雕 ” 
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2-115 绘制 图 形 


使 用 “ 圆 角 和 矩形 工具 ”和 
“椭圆 工具 ”>” 绘制 图 形 ， 


“投影 ”图 层 样 式 ， 如 











间 面 和 学 风 
结构 
样式 0: 内 利 面 。 ~ 
方法 9j: 平时 。 ~ 

















深度 (D): A % 
方 9:@ 上 © 下 
大 小 (2D): 5 5 
软化 (F): 63 0 
阴影 
角度 (N): 3 (90 度 
| 。 | 团 使 用 全 局 光 (G) 
高 度 : “一 30 度 
等 高 线 :| - 问 消除 锯齿 (0 
高 光 模式 (H): 滤 色 ~ 
不 透明 度 (0): 25 3 
阴影 模式 (A): 正片 到底 ~ 国 国 
不 透明 度 (C): 翅 6 


设置 为 默认 值 复位 为 默认 值 














图 后 挖 宇 控 时:(U) 


— 
J 结构 
混合 模式 (6): 正片 县 底 - 
不 透明 度 (0): 一 一 一 4 % 
角度 的 :| | |】 30。 度 回 使 用 全 局 光 人 
中 高 DA 2 像素 
扩展 人 :人 0  % 
大 小 (5): 四 5 ”像素 
司 品质 ee 
等 高 线 : | - 梧 湖 逐 据 卡 人 
杂 色 N: (一 0 % 


保 间 为 献 训 值 县 位 为 点 认 值 











图 2-116 添加 图 层 样式 
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=/ 0 








7 AAA 确定 操作 后 的 效果 如 图 2-117 所 示 。 执 行 “文件 ”| “存储 ”命令 ， 回 到 文档 1， 


也 终 效果 如 图 2-118 所 示 。 


图 2-117 操作 后 的 效果 图 2-118 最 终 效果 


ER 宇 光 区 果 
发 光 效 果 也 是 十 分 常见 的 设计 效果 。 为 了 表现 发 光 效 果 ， 一 般 按钮 的 背景 色 为 深 色 ， 
而 发 光 的 颜色 为 鲜艳 的 彩色 ， 对 比 强烈 。 





站 设计 思路 


本 实例 制作 的 是 发 光 效 果 的 按钮 ， 主 要 通过 “外 发 光 ” 图 层 样 式 实现 发 光 的 效果 ， 制 
作 流 程 如 图 2-119 所 示 。 








图 2-119 制作 流程 





图 层 样 式 
第 2 章 \2.2.3 发 光 效 果 








LT 新 建文 档 ， 使 用 “椭圆 工具 ”绘制 一 个 正 圆 。 按 Ctrl+C 组 合 键 复制 ， 按 

Ctrl+V 组 合 键 粘贴 ， 然 后 将 其 略微 缩小 ， 如 图 2-120 所 示 。 

LV 在 选项 栏 中 单 击 “路 径 操作 ”按钮 ， 在 打开 的 下 拉 列 表 中 选择 “排除 重合 形状 ” 
= 一， 选项 ， 如 图 2-121 所 示 ， 重 命名 图 层 为 “ 圆 环 ”。 





图 2-120 绘制 圆 并 复制 缩小 


7 为 “ 圆 环 ” 图 技 添 加 “内 阴影 ” 


UL 如 图 2-122 所 示 . 


内 阴影 
结构 
混合 模式 (6): 正片 到 底 ~ 国 国 
不 透明 度 (0): 一 一 75 
角度 (A): ( 上) 50 度 回 使 用 全 局 光 (G) 


距 高 DC 0 像素 
阻塞 (0: CT 0 % 
大 小 人 ) Ce 3 像素 


品质 


等 高 绪 : -| | 消除 锯齿 (0) 


杂 N): 4 一 一 一 % 





[_ 设置 为 默认 值 。| [ 复位 为 默认 值 | 























处 发光 

结构 

混合 模式 他 ): 滤 色 

不 透明 度 (D): 一 2 ee 35 % 
杂 色 (N): G 0 % 
5 图 

图 素 
方法 (Q@): 杀 和 
扩展 P): 三 2 一 20 % 
大 小 (5): 嘻 9 像素 








晤 | 尼 壤 口 对 六 过 综 
图 。 目 新建 图 层 
顺 合并 形状 
中 减 去 顶层 形状 


骨 | 与 形状 区 域 相交 


] 








史 ] 合并 形状 组 件 





图 2-121 选择 “排除 重 琶 形状 ”选项 
“颜色 站 加 ” “外 发 光 ”“ 投 影 ”图 层 样式 ， 




















颜色 到 加 
颜色 
混合 模式 (8)， 正 党 -| 
不 透 阴 度 (OQ): 到 8 
设置 为 默认 值 | | “复位 为 默认 值 
投影 
结构 
混合 模式 (68): 强 光 ~ 上 
不 透明 度 (O): 让 100 ”中 
角度 (A): | (ww 上 | 50 ” 度 问 使 用 全 局 光 () 
中 高 0): /二 一 0 人 慢 素 
扩展 Rj): 一 50 0% 
大 小 := J]1 ”| 像素 








图 2-122 添加 图 层 样 式 


OA 确定 操作 后 的 图 像 效果 如 图 2-123 所 示 。 复 制图 层 ， 将 其 重 命名 为 “外 环 ”. 


将 图 形 放大 , 并 绘 
去 顶层 形状 ”选项 ， 如 图 2-124 所 示 。 





图 2-123 图 像 效 果 


| 一 个 矩形, 将 


其 旋转 后 , 在 “路 径 操作 ”下 拉 列 表 中 选择 “ 减 


加 尼 培 | 口述; 
‖ 。 国 新 建 图 层 
有 合并 形状 
| v 号 减 去 两 县 形 站 


| 加 与 形状 区 或 柜 


















站 琶 时 凶 


图 2-124 选择 “ 减 去 顶层 形状 ”选项 
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更 哆 ZU | A 俯 pP 米 型 设计 从 入 门 冯 J 到 
更 先 2| 一 一 


O05 为 NR 图 层 添 加 |W 阴影 ” “ 赢 色 去 加 ”和 “投影 ” | 如 图 
S 2 











je 颜色 晋 加 

颜色 

ea a = 并 侍 模 式 昌 ): 正常 ~ 国 国 
i 不 透明 度 (0): -ma 


度 [| 使 用 全 局 光 (G) 





角度 A): 人) 可 
ET 
距离 0): 上 2 像素 
阻塞 (0): 
大 小 6j: 瑟 


























浊 语 模式 人 B): 正常 下 
不 透明 度 (0): 人 15 % 


度 站 合用 全 局 光 (6) 


角度 :| 上 人】 50 


re 











距离 (0D): 熙 0 像素 
扩展 (R): 梧 0 听 
六 小 (G): 后 1 慢 索 











图 2-125 添加 图 层 样式 


O06 bia 作 后 的 效果 如 图 2-126 = 使 用 “椭圆 工具 ”继续 绘制 
- 正 国 ， 如 图 2-127 所 示 。 


图 2-126 确定 后 效果 图 2-127 绘制 正 圆 
OO 重合 名 图 层 为 TR We | 为 图 层 添加 “ 描 边 "| 发 | Bu 和 “渐变 二 Es 过 加 ” 
图 层 样式 ， 如 图 2-128 所 示 。 


摘 边 内 阴影 


“内 阴 景 5 





结构 结构 
大 小 (5): 5 2 ”像素 混合 模式 (6): 波 色 -| 
位 置 P): 外 部 不 透明 度 (0): zy 75 % 
温 合 模式 (6): 正常 ls 角度 (A): | ! |) 90 ” 度 同 使 用 全 局 光 (6) 
不 透明 度 (0): ez 100 % es 
距离 0): < 
填充 类 型 (F): 颜色 ~ 阻塞 (c): 


颜色 : Ey 太 小 (5): 后 


各: - [| 消除 锯齿 人) 


杂 色 (人 N): 全] 0 % 








| 设置 为 默认 值 |」 | 复位 为 默认 值 | 


[设置 为 默认 值 。] | 复位 为 默认 值 | 
































结构 
混合 模式 (6): 滤 色 
不 透明 度 (D): 

杂 色 人 N): (5 





9 国 © ese | | 


图 素 
方法 (Q): 柔和 ~ 
兰 : 加 居中 人 ) 

阻塞 (0): G 
大 小 (5): 寺 

















靳 变 亚 加 








渐变 

混合 模式 (D): 正常 v | 由 | 仿 色 

不 透明 度 (p): zy 100 % 
浙 交 ， [站 | | | 反问 (R) 
样式 (LD): 线性 Y ”|vJ| 与 图 层 对 齐 (D) 
角度 (N): | %* | 90 度 
缩小 G3): 一 DS 100 % 








设置 为 默认 值 夏 位 为 默认 值 








OO 确定 操作 后 的 效果 如 图 2-129 


&A 所 示 ， 


图 2-129 确定 后 效果 


图 2-128 添加 图 层 样式 


10 继续 使 用 “椭圆 工具 ”绘制 
正 圆 ， 如 图 2-130 所 示 。 





图 2-130 绘制 正 圆 


77 重 命名 图 层 为 “上 层 ”， 为 图 层 添加 图 层 样 式 ， 如 图 2-131 所 示 。 





a 














斜面 和 浮雕 
结构 
样式 (D): 外 斜面 了 
方法 (Q): 平滑 ~ 
深度 D): AS 100 % 
方向 : @ 上 下 
大 小 四 : 了 像素 
软化 (F): 15 ”像素 





阴影 
角度 (VY: 二、s0 度 
| ， 」 回 使 用 全 局 光 (G6) 
高 度 “ 30 度 





3 | -| 是 消 人 锯 上 ( 
高 光 模式 (H): 滤 色 ~ 
不 透明 度 (D): 75 % 
阴影 模式 (A): 正片 亚 底 ~ 国 国 


不 透明 度 (CO): 3 75 % 





| 设置 为 默认 值 | | 复位 为 默认 值 | 











大 小 人 :人 1 像素 
位 置 p): 外 部 了 

混合 模式 (6): 正常 MM 

不 透明 度 (O): 





45 % 


填充 类 型 F): 颜色 ~ 
新 名 : 国 国 





| 设置 为 默认 值 “| | 复位 为 默认 值 | 
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渐变 晋 加 
渐变 


赣 合 模式 (D): 正常 





不 透明 度 (p): 


洒 朗 :| | 反 向 () 
~” 回 与 图 层 对 齐 人 


样式 (0D): 线性 


角度 :| | | 90 度 


缩放 (5): 








| 设置 为 默认 值 | | 复位 为 默认 值 | 








图 2-131 添加 图 层 样 式 














内 阴影 

结构 

混合 模式 (6): 滤 色 ~ 

不 透明 度 (0): 55  % 

角度 (A): | %* | 90 度 加 | 使 用 全 局 光 (G) 

距离 (0): 人 1 像素 

阻塞 (0): C= 一 50 % 

大 小 (5): 5 1 像素 

品质 

过 二 :| - 门 消除 锯 具 (LD) 

杂 色 人 N): 【4 | 0 po 
[设置 为 默认 值 | | 复位 为 默认 值 | 
投影 
结构 

混合 模式 6): 正片 亚 底 ~ 国 国 
不 透明 度 (0): ES 75 |% 
角度 (A): (|) 50 度 辐 使 用 全 局 光 (G) 
距离 D): 一 0 像素 
扩展 RR): 一 Z 20 % 
大 小 5): 一 一 30 像素 
品质 
二 | - 回 消除 锯齿 () 
杂 色 (N): C 0 % 
习 图 层 控 空投 影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 

















完 WE OE EO 
人 see eusLas ina 到 





WI 确定 操作 后 的 图 像 效 果 如 图 7 A》 使用“ 圆 角 和 矩形 工具 ”绘制 
em 27-132 所 示 ， 一 个 圆 角 矩形， 将 其 移 至 “外 
环 ” 上， 如 图 2-133 所 示 。 


图 2-132 图 像 效果 图 2-133 绘制 圆 角 和 珑 形 


7 重 命名 图 | 局 | 汐 “亮点 ” | 为 图 层 添 加 “内 阴 景 5” “颜色 嫩 加 ” “外 发 光 ,” 和 “ 投 
影 ” 图 层 样 式 ， 如 图 2-134 所 示 。 




















人 颜色 到 加 
ee 毅 色 
混 言 模式 (6): 正片 亚 底 - | | 
ee a 混 舍 模式 (6): 正常 "| 
Ca 量 不 透明 度 (0): ， 100  % 
前 度 (A): | ， | 90 ” 度 回 使 用 全 局 光 伯 ) 
一 0 | 设置 为 默认 值 | | 揽 位 为 默认 值 | 
阻塞 (C): ,二 0 0 
本 小 全 ) 晤 3 者 袁 
品质 
等 高 绪 : -| 问 清 许 据 具 种 
来 色 人 的 ): 晤 0 oo 
| 设置 为 默认 值 | | 复位 为 默 斌 值 | 
































四 发 江 探 蜡 : 
混合 模式 (E):， 涯 色 
es 35  % 站 全 模式 但): 强 诉 ” 
杂 色 (N): 0 % 不 透明 度 (0): ， F100  % 
9 于 前 度 (A): | ， | 50 度 回 使 用 全 局 光 扣 ) 
USDj: < 一 像素 
= 本 0 
方法 (Q): 杀 和 
扩展 P): 一 20  % 扩展 人 R):; ， 3 0 |% 
大 小 5): T= 一 一 9。 像素 大 小 名 ): 梧 1 像素 




















2-134 添加 图 层 样式 


业 bid da 
U ey 值 调 大 一 些 ， 并 添加 图 层 蒙 版 ， 最 终 效 果 如 图 9G J 





2-135 操作 后 的 效果 图 2-136 最 终 效 果 


一世) 投影 效果 


投影 能 体现 立体 感 ， 投 影 一 般 是 使 用 “图 层 样式 ”来 设置 ， 对 于 特殊 的 投影 ， 也 可 以 
直接 绘制 O 


1. “ 设 1 电 E 





本 实例 绘制 的 是 日 历 图 标 ， 日 历 图 标 中 使 用 了 长 投影 效果 ， 这 是 局 平 化 风格 中 较为 党 
见 的 投影 效果 。 如 图 2-137 所 示 为 制作 流程 。 





图 2-137 制作 流程 






YY 


2 制作 步 双 





图 层 样式 














第 2 章 \2.2.4 投 影 效 果 


(MA 为 画布 填充 深 灰 色 。 使 用 “ 圆 角 矩形 工具 ”绘制 圆 角 竹 形 ， 填 充 颜 
色 为 #ed2b58， 如 图 2-138 所 示 。 

() 重 命名 图 层 为 “ 底 ”， 为 图 层 添 加 “内 阴影 和 “内 发 光 ” 图 层 样式 ， 如 
em 图 2-139 所 示 。 


























Photosho 热门 弗 PP 类 型 设计 从 入 门 至 到 精通 


















































内 阴影 内 发 光 
结构 结构 
混合 模式 (6) 滤 色 ~ 
混合 模式 (6): 滤 色 不 透明 度 (0): 一 = 一 一 ”44 % 
不 透明 度 (0): = 20  % 杂 色 (N): 6 0  % 
] 本 6 [| 
前 度 (A): | * 90 度 站 | 使 用 全 局 光 (G) 
= 图 素 
距离 (D): [OD ] 1 像 吉 方法 (Q): 柔和 v” 
阻 寒 (C0): G 0 局 源 : 口 居 中介 。 回 边 媒 (6) 
大 小 (5): < 0 像素 阴 赛 QO: C= 一 0。 % 
己 质 大 小 9): 一 一 1 像素 
品质 
诗 圭 ， | - [ Sb 上 
等 高 线 : 消除 锯 齿 (L) 等 高 线 : [4 | 消除 锯齿 (0) 
杂 色 (N: G 0 % 范围 R): 一 = 一 50  % 
抖动 O): 4 0 % 
|_ 设置 为 默认 值 _」 | 复位 为 默认 值 | 
| 设置 为 上 默认 值 | | 复位 为 默认 值 | 














图 2-138 绘制 圆 角 和 拢 形 图 2-139 添加 图 层 样式 
7) 继续 为 图 层 添加 “渐变 县 加 ”和 “投影 ”图 层 样式 ， 如 图 2-140 所 示 。 单 击 “ 确 
J 定 ” 按 钮 后 的 图 像 效 果 如 图 2-141 所 示 。 


渐变 到 加 投影 
渐变 结构 
混合 模式 (0): 正常 = [ 全 5 
不 透明 度 (pp): 15 混合 模式 (6): 正片 到底 ~ 国 国 
渐变 : | 反 向 R) 不 透明 度 (0): Se 17 % 
样式 (): 线性 ~ 团 与 图 层 对 齐 人 
角度 (WY: | 、| 120 度 角度 (A): Ko y 90 度 疡 |] 使 用 全 局 光 (G) 
纹 小 6): 一 5 100 % 距离 (0): 于 7 ”像素 
|_ 设置 为 默认 值 | | 复位 为 默认 值 | 扩展 (R): 4 0 % 
大 小 (5): < 13 ”像素 


图 2-140 继续 添加 图 层 样式 图 2-141 图 像 效果 
0 复制 图 层 ， 将 其 重 命名 为 “上 半 部 ”， 然 后 使 用 “矩形 工具 ”绘制 矩形 ， 如 
图 2-142 所 示 。 
0 人 的 使 用 “路 径 选择 工具 ”选择 图 形 ， 在 选项 栏 中 的 “路 径 操作 ”下 拉 列 表 中 选择 “ 减 
去 顶层 形状 ”选项 ， 如 图 2-143 所 示 。 设 置 后 的 图 像 效 果 如 图 2-144 所 示 。 


图 2-142 绘制 矩形 图 2-143 选择 “ 减 去 顶层 形状 ” 选 图 2-144 设置 后 效果 


LO 为 “上 半 部 ”图 层 添加 “内 阴影 “颜色 登 如 ”和 “渐变 登 加 ”图 层 样式 ， 如 
人 图 ?145 所 示 . 
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内 阴影 渐变 到 加 

2 新 变 

温 全 模式 3) 源 色 ~ 混合 模式 (0): 正常 v 回访 色 

不 透明 度 (0): ， 2 且 混合 模式 (6): 正常 ~ 国 国 不 透明 度 (P): 一 ez 10 % 
角度 (A): | ”90 度 加 使 用 全 局 XX(6) 不 透明 度 (o): 芒 100 。 %% 淅 交 ， [i | 反问) 
a a 1 es 样式 (0D): 线性 v” 辕 与 图 层 对 诗人 (0) 

:6 0 1 3 py ] 外 

ee —i | -设置 为 默认 值 _| | 复位 为 默认 值 | 角度 MW: | 、 120 一 讼 

品质 纺 有 6): 一 一 一 100 % 
等 高 线 : | JS -| 证; 消 锯 占 D 

| 设置 为 默认 值 _| | 复位 为 默认 值 | 
杂 色 (N): G 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 


























图 2-145 添加 图 层 样 式 
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确定 操作 后 的 图 像 效 果 如 图 2-146 所 示 。 使 用 “ 撼 形 工具 ”在 左 侧 绘 制 一 个 小 
矩形， 顾 色 为 #731414, 并 复制 一 个 到 右 侧 ， 


wa A 





图 2-146 图 像 效 果 
再 次 复制 两 个 矩形 ， 修 改 颜 
色 为 #5b0e0e， 并 将 其 缩小 ， 
如 图 2-148 所 示 。 






2-148 复制 矩形 
重 命 名 图 层 为 “分 割 线 ”， 
为 图 层 添 加 “投影 "图 层 样式 ， 
如 图 2-150 所 示 。 























投影 
结构 
混合 模式 (6): 正常 了 
不 透明 度 (D): 昂 10 % 
角度 (A): | 。 | 90 度 回 使 用 全 局 光 (G) 
距离 (D): < 1 像素 
扩展 RR): < 0 % 
大 小 (5S): & 0 起 喜 
品质 
等 高 绪 ; - 消除 锯齿 人 ) 
末 色 人 N): 0 wo 
中 图 层 控 空投 影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 














2-150 添加 图 层 样 式 





图 2-147 绘制 矩形 并 复制 
使 用 “直线 工具 ”绘制 线条 ， 


Ee EI De AO ph 





2-149 绘制 线条 


确定 操作 后 的 图 像 如 图 2-151 
所 示 。 








2-151 图 像 效果 


和 
ME SH eT 








7 人 使 用 “ 模 排 文字 工具 ”输入 文字 ， 如 图 2-152 所 示 。 为 文字 图 层 添加 “渐变 得 加 
一 ”和 “投影 ”图 层 样 式 ， 如 图 2-153 所 示 。 

















渐变 亚 加 投影 
新 训 结构 
渴 公 模 相 (0)， 下 党 混合 模式 (6)， 正片 又 底 ~ 国 国 
et ): 正常 仿 色 SS 
不 透明 度 (P): » EW % : 
Nu |] DR A 
口 -es 
距 高 D): (= 一 1 像素 
~ 1 Db -一 = WY| 
样式 (): 线性 习 与 图 层 对 齐 人 人 
角度 (N): oo 度 大 小 人 ): Ce 像素 
缩放 G): 一 i 
zs 人 : 全 100 % 
等 高 线 : [A 济 逐 据 齿 人 
| 设置 为 默认 值 | | 复位 为 默认 值 | 杂 色 M: 全 0 % 
本 图 层 挖 空 投影 (J) 
| 设置 为 默认 值 。」 | 复位 为 默认 值 




















图 2-152 输入 文字 


图 2-153 添加 图 层 样式 

A) 确定 操作 后 的 图 像 效 果 如 图 2-154 所 示 。 使 用 “钢笔 工具 ”绘制 图 形 ， 重 命名 
/Jo 图 层 为 “长 投影 ”。 将 “长 投影 ”图 层 向 下 移动 一 层 ， 设 置 图 层 的 “不 透明 度 ” 
为 50%， 效 果 如 图 2-155 所 示 。 


图 2-154 图 像 效果 图 2-155 绘制 长 投影 
17 





添加 图 层 莹 版， 填充 黑色 ， 按 住 Ctrl 键 单 击 “ 底 ” 图 层 ， 载 入 选区 后 ， 再 次 选 
择 蒙 版， 填充 和 白色， 使 用 “画笔 工具 ”进行 涂抹 ， 效 果 如 图 2-156 所 示 。 


提示 : 按 住 At 键 单 击 





莹 版 缩 略 图 可 以 查看 蒙 
版 的 效果 ， 如 图 2 一 157 
所 示 。 


| READMORE | 


a 





2-156 涂抹 效果 2-157 查看 蒙 版 效果 


1 绘制 矩形 ， 重 命名 图 层 为 “ 底 了 阴影”， 将 该 图 层 调 整 至 “背景 ”图 层 上 方 ， 设 
署 图 层 的 “不 透明 度 ” 参 数 为 50%。 然 后 旋转 和 矩形， 如 图 2-158 所 示 。 
10 竹 形 的 填充 颜色 为 渐变 填充 ， 渐 变色 为 黑色 到 自 色 ， 如 图 2-159 所 示 。 





人 样式 [T): 线性 ~ 


角度 (A): (| ) [80 


弟 襄 (5): 100 | | 号 


门 反 向 (RY 信和 色 (D) 
与 图 层 对 齐 (L) 





图 2-158 绘制 矩形 并 旋转 图 2-159 渐变 填充 


1 一 此 时 的 图 像 效 果 如 图 2-160 所 示 , 添加 图 层 蒙 版 , 为 蒙 版 填充 白色 到 黑色 的 渐变 ， 
如 图 2-161 所 示 。 最 终 的 完成 效果 如 图 2-162 所 示 。 


回国 


图 2-160 图 像 效 果 图 2-161 添加 蒙 版 图 2-162 完成 效果 






酒 闫 和 皇 睦 人 妥 壬 阅 直 In ddv 任 dousoloud 已 [9: 





。 设计 师 心得 








CE 光影 在 不 司 材 质 上 的 表现 


阴影 是 最 自然 的 暗示 ， 它 可 以 突出 界面 元 素 。 当 光 从 天 空中 射 下 来 时 ， 会 照 亮 最 上 面 
的 事物 ， 并 且 向 下 投射 出 它们 的 影子 。 所 以 顶部 最 亮 ， 而 底部 最 暗 。 在 用 户 界面 中 ， 为 元 
素 添 加 阴影 后 ， 它 们 开始 变 得 立体 ， 如 图 2-163 所 示 。 在 保持 简洁 的 情况 下 ， 应 用 光影 
可 以 增加 用 户 触摸 、 滑 动 、 点 击 的 交互 欲望 。 


< CD 


图 2-163 添加 阴影 后 变 得 立体 
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物体 在 光线 的 照 咽 下 产生 立体 感 ， 出 现 物体 明暗 调子 的 规律 可 归纳 为 “三 面 五 调 ”。 


人 物体 在 受 光 的 照射 以 后 ， 呈 现 出 不 同 的 明暗 ， 受 光 的 一 面 叫 亮 面 ， 侧 受 光 的 一 
面 叫 灰 面 ， 背 光 的 一 面 叫 暗 面 。 

( ”调子 是 指 画面 不 同 明度 的 黑白 层次 ， 是 指 面 所 反映 光 的 数量 ， 也 就 是 面 的 深浅 
程度 。 四 根据 受 光 的 强 弱 不 同 ， 还 有 很 多 明显 的 区 别 ， 形 成 了 5 个 
调子 。 除 了 腕 面 的 腕 调子 、 灰 面 的 灰 调 和 有 瞳 面 的 瞳 调 之 外 ， 瞳 面 由 于 环境 的 影 
响 还 出 现 了 “反光 ”。 另外， 在 灰 面 与 瞳 面 交 界 的 地 方 ， 它 既 不 受 光 源 的 上 照射， 
又 不 受 反光 的 影响 ， 因 此 挤 出 了 一 条 最 暗 的 面 ， 叫 “明暗 交界 ”。 这 就 是 我 们 
常 说 的 “五 大 调子 ”， 





在 APP UI 设计 中 ， 无 须 把 所 有 的 调子 绘制 出 来 。 一 般 而 言 ， 要 表现 物体 的 厚度 ， 有 
两 个 部 分 必 不 可 少 ， 分 别 是 受 光 部 分 和 阴影 部 分 。 
我 们 需要 清楚 光源 从 哪里 来 ， 高 光 的 位 置 决定 了 阴影 的 位 置 ， 如 图 2-164 所 示 。 





图 2-164 光与影 
影响 光 的 因素 主要 是 结构 ， 其 次 是 材质 对 光 的 反射 比例 。 
《四 透明 材质 
透明 材质 的 有 玻璃 、 宝 石 等 。 


人 四 在 透明 材质 的 物体 上 ， 如 果 表 面 光滑 ， 光 会 在 入 射 面 有 一 个 较 强 的 反射 高 光 。 
且 当 光线 穿 过 物体 后 ， 会 在 物体 内 的 后 方 投 射出 一 块 光 斑 ， 如 图 2-165 所 示 。 


2-165 强 反 光 与 投射 光斑 





人 四 在 物体 不 直接 和 光源 成 直射 角 的 边缘 ， 会 形成 一 些 较 深 的 颜色 ， 如 图 2-166 


图 2-166 边缘 颜色 深 
人 通过 透明 物体 可 以 看 到 后 面 的 图 像 ， 如 图 2-167 所 示 ， 且 会 根据 透明 物体 的 造 
型 及 反射 率 进 行 一 定 的 扭曲 和 折射 。 





0 A 


Michael Dust 
@michaeldust 
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尖峰 主 脂 惨 匡 于 区 IN ddv 任 dous9l0dd 蕊 5: 


厚实 材质 的 如 金属 、 木 材 、 不 透明 塑料 等 。 


厚实 材质 的 高 光正 常 ， 高 光 颜 色 介 于 照射 光 和 物体 本 身 的 混和 色 。 光 线 不 会 穿 透 
物体 ， 所 以 “三 大 调 ”“ 五 大 面 ” 都 很 明显 ， 因 此 在 绘制 时 要 注意 物体 的 明暗 
交界 线 ， 如 图 2-168 所 示 。 


图 2-168 厚实 材质 








se 
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(OO 周围 的 光 投 射 在 地 表 后 会 反射 到 物体 的 背面 ， 所 以 背面 不 是 最 暗 的 ， 如 
图 2-169 所 示 。 


2-169 背景 不 是 最 暗 的 





(人 驴 粗 糙 暗 哑 材 质 
粗糙 暗 哑 材质 如 水 泥 、 原 石 、 磨 砂 橡 胶 等 。 此 类 表面 凹凸 不 平 ， 所 以 高 光 比 较 柔 和 ， 
光影 变化 也 不 强烈 ， 如 图 2-170 所 示 。 





图 2-170 粗糙 暗 哑 材 质 


国光 油 坚硬 材质 
光滑 坚硬 的 材质 如 抛光 大 理 石 、 清 漆 木 头等 。 


人 四 高 光 强 且 面 积 小 ， 反射 的 也 
是 光源 本 身 的 颜色 ， 如 图 
2-171 所 示 。 

@ 光滑 的 物体 会 对 周围 的 环境 
进行 反射 ， 并 在 物体 表明 进 


行 扭曲 和 拉 伸 。 





《 动 柔软 材质 
柔软 材质 如 布料 、 编 织物 、 皮 革 、 上 皮毛、 植物 等 。 柔 软 材质 的 表面 会 形成 很 大 区 域 ， 
产生 固有 人 色 同 色 系 的 柔和 高 光 ， 如 图 2-172 所 示 。 


gs 
~ 





2-172 柔软 材质 
如 果 是 动物 的 皮毛 ， 毛 发 表面 的 油脂 和 毛管 会 折射 光线 ， 如 图 2-173 所 示 。 





图 2-173 动物 毛发 
( 纲 流体 材质 
流体 指 水 、 牛 奶 等 液体 ， 也 包括 果 汐 、 蜂 窄 等 夭 液 。 
( 液体 由 于 表明 的 张力 ， 在 物体 表面 会 形成 球面 的 水 珠 ， 如 图 2-174 所 示 。 


(0 ” 放 在 容器 内 会 出 现 周围 挂 壁 的 现象 , 而 刚好 满 溢 的 液体 会 在 容器 的 开口 处 凸 起 ， 
如 图 2-175 所 示 。 


2-174 表面 水 珠 2-175 挂 壁 的 现象 
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于 胞 扁平 化 设计 的 流行 配色 方案 


局 平 化 设计 并 不 局 限于 某 种 色彩 基调 ， 它 可 以 使 用 任何 色彩 ， 但 是 大 多 数 的 设计 师 都 
倾向 于 使 用 大 胆 鲜 艳 的 颜色 。 

那么 ， 如 何 让 局 平 化 设计 在 色彩 上 与 众 不 同 呢 ? 设 计 师 正在 不 断 地 增加 色彩 层次 ， 将 
原本 的 一 两 个 层次 层 加 到 三 四 个 长 至 更 多 。 这 些 色 彩 的 亮度 和 饱和 度 大 都 非 贡 高 。 

在 进行 扇 平 化 设计 时 ， 传 统 的 色彩 法 则 融 不 适用 了 ， 转 而 以 彩虹 色 这 种 流行 色 来 进行 
由 


加 纯色 

局 平 化 设计 一 般 都 有 特定 的 设计 法 则 ， 比 如 ， 利 用 纯色 、 复 古色 或 是 同类 色 。 但 并 不 
是 说 这 是 唯一 的 选择 ， 而 是 这 种 方式 已 经 成 为 一 种 流行 的 趋势 ， 也 更 受 大 家 欢迎 。 

提 到 扁平 化 设计 的 色彩 ， 纯 色 一 定 首当其冲 地 出 现在 我 们 的 脑海 里 ， 因 为 它 市 来 了 一 
种 独特 的 感受 。 纯 粹 的 莞 色 往 往 能 够 与 明亮 的 或 者 灰暗 的 背景 形成 对 比 ， 以 达到 一 种 极 富 
冲击 力 的 视 客 效果 。 所 以 说 ， 在 进行 局 平 化 设计 时 ， 纯 色 绝 对 是 最 受 欢 迎 的 色彩 趋势 ， 如 
2-176 所 示 。 


T 
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图 2-176 纯色 
在 局 平 化 设计 中 ， 三 原色 是 很 少见 的 ， 即 正 红 、 正 蓝 和 正 黄 。 


畏 复古 色 

在 进行 局 平 化 设计 时 ， 复 古色 也 是 一 种 常见 的 色彩 方式 ， 如 图 2-177 所 示 。 

这 种 色彩 虽然 饱和 度 低 ， 但 却 是 在 纯色 的 基础 上 添加 白 色 ， 以 使 色彩 变 得 更 加 柔和 。 
复古 色 经 党 以 大 量 的 权 色 和 黄色 为 主 ， 但 有 时 也 有 红色 或 监 色 。 

在 局 平 化 设计 中 ， 以 复古 色 为 主 色调 是 很 前 见 的 ， 以 为 这 种 色彩 能 够 使 页 面 变 得 更 加 
柔美 、 富 有 女性 气质 。 
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图 2-177 复古 色 


人 呈 同类 色 ( 单 色 调 ) 

在 局 平 化 设计 中 ， 使 用 同类 色 正 迅速 成 为 一 种 流行 趋 劳 。 这 种 色彩 往往 以 单一 颜色 欣 
配 黑色 或 白色 来 创造 一 种 鲜明 且 有 视觉 冲击 的 效果 。 同 类 色 在 移动 设备 和 APP 设计 中 格 
外 受 欢 迎 。 

大 部 分 同类 色 利 用 一 个 基本 色 搭 配 两 三 个 色彩 ， 如 图 2-178 所 示 。 男 一 个 方法 是 设 
计 少 量 的 色彩 变化 。 比 如 ， 赣 色 配 以 绿色 呈现 出 一 种 蓝 绿 色 的 效果 。 

人) 6RAB MAULPHOTOS 
0: 07/ CD) PRINT WEEKLY REPORT 
O TAKEOUTMWU0 
@) PACKKIDSLUNCHES 
ES aaa NSDN0 


EMILYS BALLET 
RECITAL 


eA 5.30 | 





图 2-178 同类 色 
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酒 问 单 由 全 刁 半 下 In ddv 任 dousoloud 已 [9: 
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多 男 面 控件 廊 计 ， 






界面 控件 是 指 放置 在 界面 上 的 可 视 化 图 形 ， 大 多 数 具有 执行 功 
能 ， 控 制 事件 的 发 生 。 


(CI 常见 的 演 件 元 素 





ulll MegaFon 18:49 











在 APP 界面 中 常见 的 控件 元 素 有 图 标 、 按 钮 、 进 ssid 
度 条 、 单 选 按 钮 、 复 选 框 、 搜 索 栏 、 导 航 栏 等 ， 如 图 i dd z 
让 nn 
3-1 所 示 。 

下 

@ 全 ve ) 
图 标 是 大 家 对 一 款 APP 的 第 一 印象 ， 也 是 APP pn uy Yes No w Yes No 
面 中 不 可 或 缺 的 一 部 分 。 图 标 按 功能 分 为 应 用 图 标 、 功 
能 图 标 和 示 小 局 意图 标 。 Step one Second The last 
和 一 全 3 





图 3-1 常见 的 控件 元 素 


半 光 负 洁 六 球 丘 回忆 In ddv 二 9 


@@ 应 用 图 标 : 通常 是 APP 的 入 口 ， 是 产品 的 一 种 概括 性 视觉 表现 ， 能 够 简洁 、 显 
眼 且 友 好 地 传递 产品 的 核心 理念 和 内 涵 ， 如 图 3-2 所 示 。 


入 下 档 子 召 乐 


必 
(® 


天 天 动听 APP 


图 3-2 应 用 图 标 
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@@。 芭 能 园 行 : 功能 图 标 一 般 代表 可 操作 性 的 命令 、 文 件 、 设 备 或 目录 ， 如 图 3-3 
所 示 ， 并 包括 默认 、 和 触摸 、 选 中 3 种 状态 。 需 要 注意 的 是 ， 简 化 的 图 标 需 要 表 
达 出 相应 的 含义 ， 在 小 尺寸 下 也 必须 清晰 易 懂 。 





图 3-3 功能 图 标 
@ 示 襄 图 标 : 用 于 指示 用 户 无 须 操 作 的 信息 ， 如 图 3-4 所 示 。 这 类 图 标 只 有 一 人 人 
状态 。 





为 写 03:36 


积分 记录 





的 积分 : 448 分 
| 








本 -= 充值 
意见 反馈 > 
住 荐 给 好 友 > 充值 
;出 版 本 > 
闻 关 成 功 
阁 关 成 功 


图 3-4 示意 图 标 





| 


网 按钮 

按 镭 是 APP 界面 中 最 基本 ， 也 是 最 不 可 缺少 的 控件 。 无 论 是 何 种 APP 应 用 程序 ， 都 
少不了 按 钳 元 素 ， 通 过 按钮 能 完成 返回 、 设 置 、 跳 转 、 天 闭 等 多 种 操作 。 如 果 将 有 关联 的 
按钮 放 在 一 起 ， 还 可 以 形成 按钮 组 ， 如 图 3-5 所 示 。 





3-5 按钮 组 


& 半 ” 单 选 按钮 、 复 选 框 

单 选 按钮 是 一 组 操作 中 有 多 个 选项 ， 但 只 允许 用 户 从 中 选择 一 个 ， 
如 图 3-6 所 示 。 适 合 需要 用 尸 看 到 所 有 可 用 选项 并 排 显 示 的 开关 设计 。 

复 选 框 也 是 一 组 选项 ， 允 许 用 户 选 择 多 个 ， 如 图 3-7 所 示 。 通 过 多 
选 的 方式 来 设置 。 适 合 需 要 在 列表 中 设计 多 个 开关 设置 ， 并 能 节省 空间 的 开 
关 设 计 。 


© 


© 


3-6 单 选 按钮 3-7 复 选 框 





@ 国 导航 

APP 导航 承载 着 用 户 获取 所 需 内 容 的 快速 途径 。APP 的 导航 样式 多 种 多 样 ， 如 图 
3-8 所 示 。APP 导航 按 排列 方式 不 同 可 分 为 列表 式 和 网 格式 两 大 类 ， 再 由 此 演变 成 其 他 类 
别 。 常 见 的 主导 航 有 标签 式 、 抽 居 式 、 富 格式 、 列 表 式 等 类 型 ， 以 及 不 同 导航 类 型 之 间 的 
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底部 标签 导航 底部 标签 扩展 导航 抽 居 导航 富 族 导 
|= 
| i 
| | La Ua 
| | | 国 

国 国 1 DA | | 
且 合 号 表 导 航 页 部 标签 导 轮 播 导航 



































| 国 国 国 国 国 | 





图 3-8 APP 的 导航 样式 


gE EA FR OAR 
按钮 组 是 一 种 基础 控件 ， 根 据 其 风格 属性 可 派生 出 命令 按钮 ， 复 选 框 、 单 选 按钮 、 组 


框 和 自给 式 按 钮 等 类 型 ， 在 移动 应 用 中 随处 可 见 。 按 钮 组 中 常见 的 按钮 外 观 包括 了 圆 角 算 
形 、 和 矩形 和 圆 形 等 。 


设计 思路 





本 实例 制作 的 是 播放 界面 的 按钮 ， 通 过 绘制 一 个 底层 背景 ， 确 定 按钮 的 位 置 与 布局 ， 
再 绘制 按钮 ， 并 设置 图 层 样式 ， 将 按钮 图 形 与 底层 相 融 合 ， 由 3 个 按钮 组 成 一 个 按钮 组 。 
制作 流程 如 图 3-9 所 示 。 





图 3-9 制作 流程 























贺 | 角 是 玉 工具 i 几 国 左 居 ”图 | 层 检 生 ( 
第 3 章 \3.1.2 按钮 组 设计 


























LT 新 建文 档 ， 添 加 背景 素材 。 使 用 “ 圆 角 和 矩形 工具 ”和 “椭圆 工具 ”绘制 图 形 ， 
如 图 3-10 所 示 。 


0 


(}2 


区] pO 


图 3-10 绘制 图 形 


LI 继续 为 图 技 添 加 “ 描 边 


J 如 图 3-12 所 示 。 








描 边 
结构 
大 小 (5): G 2 像 素 
位 置 Pp): 外 部 
混合 模式 (6): 正常 了 
不 透明 度 (D): 74 |» 
填充 类 型 (F): 渐变 
新 去 RE |v | 辣 反 向 (R) 





样式 (D): 线性 ~ 同 与 图 层 对 齐 (6) 
角度 (A): (“IL ) 50 一度。 回 仿 色 
缩放 (C): 一 100 史 


设置 为 默认 值 复位 为 默认 值 





























结构 
混合 模式 (6): 滤 色 M 
不 透明 度 (0): < 11 % 
杂 色 人 N): (5 0 % 
6 De 
图 素 
方法 (Q): 精确 
源 :加 居 中介 ) 回 边缘 (G) 
阻塞 (C): 2 100 % 
大 小 (5): 人 1 像素 
品质 
等 高 线 : | 和 站 消除 锯齿 (L) 
范围 (R): % 
抖动 O): 6 0 % 





| 设置 为 默认 值 | | 复位 为 默认 值 | 





将 图 层 重 命名 为 “底层 背景 * 


7? “内 阴 景 5” 





， 为 图 层 添 加 “和 斜面 和 浮雕 ”图 层 样 式 ， 


妇 0 








冬 面 和 浮雕 
结构 
样式 (D: 内 俐 面 了 
方法 (Q): 平湖 ~ 














深度 D0): 毛 100  % 
方向 : 鸭 上 全 下 
大 小 (2): 本 5 像素 
软化 (FP): zs 4 像素 
阴影 
角度 (N): 3 (90 度 
| ， | 回 使 用 全 局 光 (G) 
高 度 : “ 30 度 
光泽 等 高 线 :| - 记 | 消除 锯齿 人 ) 
高 光 模 式 (H): 正常 M 
不 透明 度 (0): = 17  % 
阴影 模式 (A): 正常 _ 
不 透明 度 (C); 14 % 





设置 为 默认 值 | | 复位 为 默认 什 
图 3-11 添加 图 层 样式 








Beeld “渐变 A 登 加 ” 和 和 “ 投 早 及 景 g? 图 层 样 式 ， 















































内 阴影 
结构 
混合 模式 介 ): 正常 下 
不 透明 度 (D): 36 % 
| 
角度 (A): | * | 90 度 辣 使 用 全 局 光 (G) 
距离 0): 4 1 像素 
阻塞 (c): 人 0 % 
大 小 (5): CS 0 像素 
品质 
高 线 : } "| | | 消除 锯 上 人 L) 
末 色 (N): 4 % 
| 设置 为 默认 值 | | 复位 为 默认 值 
渐变 到 加 投影 
渐变 结构 
混合 模式 (0): 正常 v 回访 色 混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (P)，= 20 om% 不 透明 度 (0): ZS 46  % 
六 交 : [和 | 癌 反 向 n) 角度 (A): (| 50 度 回 使 用 全 局 光 (G) 
样式 :线性 ~ 团 与 图 层 对 齐 (1) 距离 D0): 帮 2 像素 
mm 扩展 (R): 65 0 % 
角度 人 :| wp 名 大 小 (5): 丘 4 像素 
缩放 人): 100  % 品质 
| -设置 为 默认 值 _| | -复位 为 默认 值 | 等 高 线 ; } -| 1 二 消除 锯 上 (0) 
杂 色 人 N): 人 % 
财 图 层 挖 空 投影 (J) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 


图 3-12 继 绍 





卖 添加 图 层 样 式 
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0 A 确定 操作 后 设置 填充 为 40%， 0 /所 使 用 “直线 工具 ”绘制 线条 ， 
此 时 图 像 效 果 如 图 3-13 所 示 、 uD 


wo 





图 3-13 图 像 效 果 图 3-14 绘制 线条 
A 将 图 层 重 命名 为 “ 左 分 隔 线 ”， 0 一 ”确定 操作 后 的 图 像 效 果 如 图 
为 图 层 添 加 “投影 ”图 层 样 式 ， 3-16 所 示 。 


如 图 3-15 所 示 。 


混合 模式 (6)， 正常 - 
不 透明 度 (o)， < 
角度 (A): ( 。 0 度 回 使 用 全 局 光 ( 


距离 好 ): 后 | 2 像素 


扩展 (R): 本 m= 0 


0 5 











大 小 全 :本 0 像素 





图 3-15 添加 “投影 ”图 层 样式 图 3-16 图 像 效 果 


CO 使 用 “椭圆 工具 ”和 “ 自 定形 状 工具 ”绘制 图 形 ， 如 图 3-17 所 示 。 将 图 层 重 命 
名 为 “ 左 按 钮 ”， 设置 图 后 “填充 ”为 70%， 为 图 层 添加 “内 阴影 ”图 层 样 式 ， 
如 图 3-18 所 示 。 





内 阴影 
结构 


混合 模式 (6): 正常 > 
不 透明 度 (o): 
角度 (A): | 、 |120 度 园 使 用 全 局 光 (G) 


距离 (0): 人 1 像素 
阻塞 (0): 4 0 % 
大 小 (5): 6 0 像素 


品质 


等 高 续 : | - 消除 锯齿 (0) 


杂 色 人 N): 0 % 


30 % 





[设置 为 默认 值 | | 复位 为 默认 值 | 











图 3-17 绘制 图 形 图 3-18 添加 图 层 样式 


CO 然 续 为 图 层 添加 “内 发 光 
WA 3-19 所 示 . 




















结构 
混合 模式 (6): 正常 Md 
不 透明 度 (0): < 10  % 
杂 色 (N): 4 0 % 
图 素 
方法 (Q): 柔和 
源 :加 居中 人 E) 回 边缘 (G) 
阻塞 (O: D100 % 
大 小 (5): 4 1 像素 
品质 
等 高 线 : | - 同 消除 锯 上 QD) 
范围 (R): zs % 
抖动 D): C5 0 % 








| 设置 为 默认 值 “| | 揽 位 为 默认 值 | 





























外 怪 江 
结构 
赣 合 模式 (E): 正常 v 
不 透明 度 (D): < 10 % 
末 色 人 N): G 0 % 
9 图 OB | 
图 素 
方法 (Q): 杀 和 
扩展 人 p): 100 嗓 
大 小 全 ): 全 1 像 喜 
品质 
等 高 续 : | | 站 消除 锯 上 QD) 
范围 (R): o% 
拌 动 Q): 65 0 % 
设置 为 默认 值 复位 为 默认 值 








图 3-19 继 


渐变 登 加 ” “外 发 光 ” “投影 ”图 层 样式 ， 如 图 





一 渐变 要 加 ， 
新 变 一 
混合 模式 (0)， 权 加 ~ 回 念 色 
不 通明 度 P): = 50  % 


有: EE || 站] 反 向 ff) 


样式 ()， 线性 ” 回 与 图 层 对 六 人 
角度 :| 上 18 度 
沂 反 (5): 一 -一 一 100 吗 


信 半 为 默 冰 值 县 位 为 吾 炙 值 























一 损 影 - 
一 结构 
北 合 模式 介 ): 正常 ™ I 
不 透明 度 (D) 25  % 
角度 (A): ( 、 】 120 。 度 回 使 用 全 局 光 人 
中 高 人 0): 1 像 圳 
扩展 Rj): 一 0 兄 
大 小 全) [ai] 1 像素 
- 品质 
等 高 续 : ， - 站 消除 锯齿 仙 ) 
末 色 人 N): i m0 
加 图 层 控 空投 影 (Lu) 
误 置 为 默认 值 四 位 为 于 认 值 








续 添加 图 层 样 式 


7 0) 确定 后 的 效果 如 图 3-20 所 示 。 复 制 “ 左 分 市 线 ” 和 “ 左 按钮 ”图 层 ， 将 复制 的 
图 层 重 命名 为 “ 右 分 隔 线 ”和 “ 右 按 钮 ”。 调 整 图 层 位 置 ， 并 将 “ 右 按 钮 ”图 


形 进 行 水 平 翻 转 ， 如 图 3-21 所 示 。 





图 3-20 效果 





图 3-21 复制 并 调整 


/5 





ns Eh 














使 用 “椭圆 工具 ” 


绘制 正 圆 ， 


国人 0 区 国人 各国 攻 2 











图 3-22 绘制 正 圆 





图 3-24 图 像 效 果 
将 图 层 重 命名 为 “ 底 纹 ”， 
图 层 样 式 ， 如 图 3-26 所 示 。 


放风 


L 设置 图 层 “ 境 充 ” 为 50%， 图 像 效果 如 图 3-24 所 示 。 使 用 “ 梢 国 工具 ”， 
一 个 填充 颜色 为 橙色 的 正 国 ， 


























66 ?7 BB 
如 图 3-22 所 示 。 将 图 层 重 命名 为 “外 轮廓 ”， 为 
内 发 光 投影 
结构 结构 
温 合 模式 (6): 正常 ” 
不 通明 度 O): 一 一 55% 混合 模式 (6): 正常 ” 
杂 色 (N): /一 0 % 不 透明 度 (0): 5 10 % 
6 图 oO 角度 (A): | 1 | 50 度 回 使 有 全 局 光 (G) 
图 素 距离 (0): 万 2 像素 
Em 扩展 R): 6 0  % 
源 : 侣 居中 人 E) 回 边缘 (G) 大 小 (S): /3 0 像素 
阻塞 (0): C= 0 % 
大 小 3): 一 5 像素 品质 
品质 等 高 续 : -| | 二 消除 锯齿 (0) 
等 高 线 : | 消除 刀具 人 杂 色 (N): 所 o% 
范围 R): 一 2 一 50  % = 
人 加 和 
| 设置 为 默认 值 | | 复位 为 默认 值 
| 设置 为 默认 值 | | 复位 为 默认 值 | 











图 3-23 添加 图 层 样 式 
绘制 


如 图 3-25 所 示 。 





图 3-25 绘制 正 圆 


为 图 层 添 加 i 阴 景 5” “渐变 县 又 私 加 ” “图 案 有 又 1” 和 “ 投 

















内 阴影 
结构 
混合 模式 四， 正常 "LL 
不 透明 度 (D): 
角度 :| 上 ] 60 度 回 使 用 全 局 光 人 
大 高 个: 三- 一 3 他 
阻塞 CO 人 
本 小 全 i 0 像素 
品质 
S| S| 日 济 Si 
杂 色 人 的) Ey 0 
设置 为 奔 认 值 ] [ 在 位 为 加 计 人 秆 











靳 变 亚 加 
淅 弯 
北 侣 模 陈 亿 ): 要 加 = 回信 和 色 
不 透明 度 人 P): 45 史 
新 之 : | 辣 反 向 R) 
样式 {L): 续 性 = | 国 与 图 层 对 齐 人 0 
角度 :| 上 | 0 度 
弟 忆 (5): - PE 150  % 
设置 为 默认 值 收 位 为 默认 值 






































图 案 亚 加 投影 
Es | 结构 
温 台 模式 (B): 正常 瘟 合 模式 (6): 正常 ~ 国 国 
不 透明 度 (Y): 让 3 oe 不 透明 度 (O): ZS 50  % 
角度 (A): ( 上 | 50 ” 度 回 使 用 全 局 光 (G) 
是 E 转 贴 尝 原点 信 ) 距离 {0D): 一 3 僻 雪 
扩展 (R): 65 0 %o 
弟 志 (5): 100 哆 大 小 (5): 里 5 像素 
名 | 与 图 层 链 接 的 品质 
口 吕 
设置 为 点 让 值 复位 为 默认 值 尘 襄 线 : | - 丫 水 锯齿 QU) 
杂 色 (N): 4 0 9 
尽 图 层 控 空 投影 (U) 
[设置 为 默认 值 | | 复位 为 默认 值 | 

















图 3-26 添加 图 层 样式 


确定 后 的 图 像 效果 如 图 3-27 所 示 。 使 用 “椭圆 工具 ”和 “ 自 定形 状 工具 ”绘制 
图 形 呈 如 图 B28 
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3-27 图 像 效 果 3-28 绘制 图 形 


7 万 将 图 层 重 命名 为 “图 标 ”， 设 置 图 层 “ 填 充 ” 为 70%， 为 图 层 添加 “内 阴影 ”“ 内 
发 光 ” “渐变 登 加 ” “外 发 光 ” 和 “投影 ”图 层 样式 ， 如 图 3-29 所 示 . 


SE a 9 


















































PR 阴影 oe 渐变 到 加 
ey py 混合 模 式 (8)， 正常 - 河 下 
i 不 透明 度 (0): 10  % 混合 模式 (D): 亚 加 v 回访 色 
不 透明 度 (D): 30 % 杂 色 (N): C= 一 0 % 不 透明 度 (P): 50 % 
MR (©) mE Oem a AT] 口 Eno 
epi ~ 样式 QD: 线性 ~ 团 与 图 层 对 齐 (0 
pd 0 
源 :加 居中 人 日 回 边缘 (G) /A 
大 小 (5S): G 0 像素 FE 前 度 (N): | ) 90 度 
品质 A 小 SO 1 像素 缩放 (5): 100 史 
品质 
| -| 回 消除 撮 具 (0) 
的 s&s$:| 人] insd [设置 为 默认 值 | [ 复位 为 默认 值 | 
求 人 





范围 R): 一 = 一 50  % 





| 设置 为 默认 值 。| | 复位 为 默认 值 | 0 0 人 




















[设置 为 默认 值 | | 复位 为 默认 值 | 





























外 发 光 jn 
混合 模式 (E): 正常 - 
不 透明度 (0): 而 % 温 语 模式 (8): 正常 - 国 国 
杂 色 Mi: 全 0 % 不 透明 度 (0): = 25  % 
° 国 = 角度 (A): | 下 1 1 麻 国 使 用 全 局 光 扣 ) 
人 员 oj: 5 一 各 素 
tk 
方法 (Q): 柔和 ~ i 
| 
扩展 (P): 100 oo 扩 展 避 ): [村 ] 癌 So 
大 小 (5): 全 1 像素 大 小 如 ): 否 1 像素 














图 3-29 添加 图 层 样式 


7 








先 COE EE 
MU 


1D 确定 后 的 图 像 效 果 如 图 3-30 
J 








图 3-30 完成 效果 


、 有 请 忆 对 话 答 设 计 
对 话 框 有 两 种 ， 提 示 对 话 框 和 聊天 对 话 框 。 这 里 介绍 的 是 提示 对 话 框 ， 其 一 般 有 两 个 
按钮 ， 即 “是 ”和 “人 否 ” 选 择 按钮 。 
Bx 设计 思路 
本 实例 绣 制 的 是 简单 的 对 话 框 ， 整 个 界面 为 日 色 ，“ 是 ”和 “人 否 ”的 两 个 按钮 以 绿色 
和 红色 进行 设计 ， 十 分 显眼 。 制 作 流 程 如 图 3-31 所 示 。 











vv 是， 马上 关闭 X ” 否 ， 继 续 等 待 ”是 ， 马上 关闭 X ” 否 ， 继 续 等 待 





3-31 制作 流程 
己 


ET 


“ 圆 角 矩形 工具 ”、 图 层 不 透明 度 、 图 层 样式 
第 3 章 \3.1.3 对 话 框 设计 



























































OF 新 建文 档 ， 添 加 背景 素材 ， 绘 制 圆 角 和 矩形， 设置 “不 歼 明 度 ” 为 30%， 如 图 
3-32 所 示 。 将 图 层 重 命名 为 “ 半 透 明 层 ”。 继 续 绘 制 圆 角 短 形 ， 设 置 填充 颜色 
为 白色 ， 如 图 3-33 所 示 。 





3-32 绘制 圆 角 和 矩 形 3-33 绘制 圆 角 算 形 





LA 将 图 层 重 命名 为 “背景 层 ”， (yl 使 用 “ 横 排 文字 工具 ”输入 
一 | 为 图 友 添 加 | 投影 中 图 技 样 式 ， | | 30 3 A 
如 图 3-34 所 示 。 








投影 
混合 模式 (3)， 正常 - 国 国 
不 透明 度 (O): 2 100  % 
角度 :| | 】50 度 加 使 用 全 局 (6) 
中 高 D): 一 一 了。 佛 素 
扩展 (IR): A 0 听 
大 小 @): 一 一 一 3 像素 











图 3-34 添加 “投影 ”图 层 样式 图 3-35 输入 文字 


0 使 用 “ 圆 角 适 形 工具 ”绘制 圆 角 和 珑 形 ， 如 图 3-36 所 示 。 将 图 层 重 命名 为 “按钮 ”， 
为 图 层 添加 “斜面 和 浮雕 ”“ 描 边 ” 图 层 样 式 ， 如 图 3-37 所 示 。 


























针 面 和 浮 限 描 边 | 
结构 结构 疡 
样式 (1): 内 秆 面 。 > 大 小 G): CS 1 像素 局 
方法 (Q): 平滑 ~ 本 = 后 
深度 D): 吧 100 % 位 置 (P): 内 部 = 
:OE OF 混合 模式 (8): 正常 > 
大 小 (2): 所 2 ”像素 
ri 一 不 透明 度 (D): 2 100  % 二 
Pe 
EE 填充 类 型 F): 颜色 ~ 让 
角度 WJ: 。、90 度 万 
| Nt) 颜色 : 辆 元 
高 度 : 一 度 素 
光泽 等 高 线 口 湖 $ 锯 上 设 
高 光 模式 (H): 源 色 a 
不 透明 度 (0O): CS 0) % 
阴影 模式 (): 正片 县 底 ~ 国 国 
不 透明 度 (CO): se 15 % - = 
设置 为 默认 值 复位 为 默认 值 
| 设置 为 默认 值 | [ 复位 为 默认 值 | 














图 3-36 绘制 圆 角 和 矩形 图 3-37 添加 图 层 样式 


LO 继续 为 图 层 添 加 “内 阴影 ” “渐变 登 加 ”和 “投影 ”图 层 样 式 ， 如 图 3-38 所 示 。 



























































新 变 秋 加 
渐变 
混合 模式 (6): 正常 M | 混合 模式 (6): 正常 ~ 加 天 
不 透明 度 (0): yr 0 % 混合 模式 (0): 亚 加 ~ 回访 色 不 通明 度 (0): 30  % 
~ -一 人 一 | 
角度 (A): (| ) 区 度 回 使 用 全 局 光 (G) 个 透明 度 P): 三 25 ”上 鸭 角度 (A): (| 区 度 问 使 用 全 局 光 (G) 
于 HR ET 口 gaw = 
距 高 D): 万 2 ”和 公 素 加 距离 D): 所 1 像素 
阻塞 (O): 100  % 样式 (0D): 线性 v” 园 与 图 层 对 齐 (D) 扩展 (R): < 0 % 
小 (S): /5 “f= 大 小 (S): 和 2 像素 
A J 角度 WJ: (| ) 8 度 . 
品质 b> 后 
绵 才 (5): zs 100 % 言 :| -| 可 
杂 色 (Wi: 6 % [设置 为 默认 值 | [ 复位 为 默认 值 ] 杂 色 Wi: G 0 % 
医 王 团 图 层 挖 空 投影 (U) 























图 3-38 继续 添加 图 层 样 式 
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物 OE EEO 
人 aa us Lei 二 二, 坟 汪 和 





LO 确定 后 的 效果 如 图 3-39 所 示 。 OF 使 用 “椭圆 工具 ”绘制 正 圆 ， 
如 图 3-40 所 示 。 





图 3-39 图 像 效 果 图 3-40 绘制 正 圆 
CD 为 图 层 添 加 “内 阴影 "图 层 样式 ， 
人 CD] 如 图 3-41 所 示 . 























内 阴影 
兰 构 
混合 模式 (6): 正片 县 底 ~ 国生 
不 透明 度 (O): 10 % 
角度 :| 上 | 90 。” 度 回 使 用 全 局 光 (G) 
距离 {0D): 旺 1 局 二 
阻塞 (C): 9 100 % 
大 小 (5): 瞪 0 像素 
图 3-41 添加 “内 阴影 ”图 层 样式 图 3-42 图 像 效 果 


10 使 用 “ 圆 角 矩形 工具 ”绘制 图 形 ， 将 图 层 重 命名 为 “ 勾 ”， 并 为 图 技 添加 “投影 ” 
/ 图 层 样 式 ， 如 图 3743 所 未 。 使用“ 模 排 文 守 工 具 ” 输 入 文 宁 ， 如 图 3744 所 示 ， 





投影 
混合 模式 (6): 正片 受 底 ”El 
不 透明 度 (0): 2 一 他 20  % 
角度 :| | 使 用 全 局 光 (G) 
距离 DD): G 
扩展 R): A 
大 小 (5): G 





3-43 添加 “投影 ”图 层 样式 图 3-44 输入 文字 
选择 “按钮 ”图 层 ， 然后 按 住 Shift 键 选择 “ 勾 ” 图 层 , 单 击 和 鼠标 右键 ,选择 “从 
图 层 建 立 组 ”命令 ， 将 组 命名 为 “(是 ) 按钮 ”。 
复制 组 ， 并 将 复制 的 组 重 命名 为 “( 否 ) 按钮 ”， 展 开 组 ， 修 改 相应 图 层 的 图 
形 颜 色 、 图 层 样 式 与 文字 ， 如 图 3-45 所 示 。 使 用 “ 拢 形 工具 ”绘制 矩形 ， 添 加 
蒙 版 ， 效 果 如 图 3-46 所 示 。 


~ ~、 
|\ 直 





3-45 复制 并 修改 图 3-46 绘制 矩形 并 设置 蒙 版 





1 AM 将 图 层 重 命名 为 Wake | 为 图 层 添 加 “内 阴影 ” “ 淅 这 县 加 ” 和 本 影 ?” 图 
层 样式 ， 如 图 3-47 所 示 。 























内 阴影 渐变 到 加 投影 
结构 渐变 结构 
混合 模式 (6): 正常 ~ 混合 模式 (0): 到 加 ~ 回访 色 混合 模式 (6): 正片 到 底 ~ 加 加 
不 透明 度 (0): = 100  % 不 透明 度 (P): 2 一 62 不 透明 度 (0): To 一 一 8 % 
角度 (A): ( 上 ) 90 度 回 使 用 全 局 光 (G) -== 角度 (A): ( 【50 度 回 使 用 全 局 光 (G) 
- 样式 (): 线性 ~ 园 与 图 层 对 齐 人 - 
距 高 D): 一 1 ”像素 中 高 D): (一 1 | 像素 
阻塞 (0): G 0 % 角度 (N): | Wy 90 度 扩展 R): 二 0 % 
大 小 GS): a 0 像素 缩放 (S): 5 100 % 大 小 6): 后 3 像素 








图 3-47 添加 图 层 样 式 


A A 确定 操作 后 的 图 像 效 果 如 图 A / 使 用 “直线 工具 ”绘制 一 条 直 
3-48 所 示 。 / 线 ， 如 图 3-49 所 示 。 





图 3-48 图 像 效 果 图 3-49 绘制 线条 


De ee 


Y 是， 马上 关闭 X ” 否 ， 继 续 等 待 





3-50 制作 完成 


< 标签 导航 设计 

标签 式 导 航 是 APP 应 用 中 最 普遍 、 最 常用 的 导航 模式 ， 合 在 相关 的 几 类 信息 中 间 
频繁 地 切换 。 这 类 信息 优先 级 较 高 、 用 户 使 用 频繁 ， ome re tn 
重要 性 ， 将 标签 的 分 类 控制 在 5 个 以 内 ， 在 视 咒 表现 上 凸显 当前 用 户 位 置 ， 用 户 可 以 迅速 
地 实现 页 面 之 间 的 切换 而 不 会 迷失 方向 ， 简 单 且 高 效 。 


81 





半 沙 渊 半 闫 指 刁 国 当 I ddv G3 








Photoshop 热门 Opp 类 型 设计 从 入 门 到 精通 
更 哆 gUI 








ET 

本 实例 制作 的 底部 标签 导航 ， 由 5 个 标签 组 成 ,， 中间 的 标签 为 最 重要 且 使 用 最 频繁 的 ， 
因此 ， 通 过 蓝 色 进行 突出 。 通 过 绘制 图 形 ， 添 加 “图 案 车 加 ”图 层 样 式 实现 纹理 效果 ， 通 
过 添加 其 他 图 层 样 陈 实 现 凹 陷 与 凸 出 的 立体 效果 ， 如 图 3-51 所 示 为 制作 路 程 图 。 


Docs Settings Docs Settings 





图 3-51 制作 流程 图 


闹 
>、 


ETTZ 


知识 点 “ 圆 角 矩形 工具 ”、 图 层 不 透明 度 、 图 层 样式 
第 3 章 \3.1.4 标签 导航 设计 


0 7 使用 | 有 有 生生 





























图 3-52 绘制 矩形 


将 图 层 重 命名 为 “ 底 纹 ”， 为 图 层 添加 “ 描 边 ， < 渐变 登 加 ” “图 


“内 阴 最 5” 











填充 类 型 F): 颜色 ~ 
产 色 : 加 





| 设置 为 默认 值 。| | 复位 为 默认 值 | 














受 2? CO DT 区 = Ea 
案 登 加” “投影 ”图 层 样式 ， 如 图 3-53 所 示 。 
结构 结构 渐变 
大 小 (5): 4 1 像素 混合 模式 (6): 正常 ~ 混合 模式 (0): 柔 光 v 回 ] 仿 色 
位 置 (P):; 外 部 ~ 不 通明 度 (0): 2 75 % 不 透明 度 (P): 97 % 
混合 模式 (6): 正常 > 角度 (A): (| ) 50 度 回 使 用 全 局 光 (G) 新 变 : [3 | 了 | 团 反 向 QR) 
不 透明 度 (0): py 100 % 


中 高 0): 一 一 2 像素 样式 (): 线性 >” 团 与 图 层 对 齐 (1) 


阻塞 (C): * = 100 % 
大 小 (5): Ce 0 像素 


角度 :| * ] 90 度 





品质 缩放 (5): A 100  % 


等 高 绪 ; ”| 加 消除 锯 具 们 ) 


杂 色 (IC 0 % 


|_ 设置 为 默认 值 | | 复位 为 默认 值 | 














| 设置 为 默认 值 | | 复位 为 默认 什 





















































图 案 亚 加 
安 a 
es 混合 模 到 (6): ”正片 又 底 - EE 
混合 模式 (6): 县 加 不 透明 度 (O): Sm ra 5 
~ 角度 全 ): | -So 度 后] 读 用 全 局 光 (GE) 
不 透明 度 (Y): zs  % T ) 
FE 高 (DD): 伟 1 作 碌 
扩展 (RY: 二 o Se 
图 案 : 加 “| 贴 紧 原点 (A) 2 2 
品质 
缩放 (6): 一 二 | -| 辣 消除 户 齿 GD) 
a 杂 色 MmD: < 56 
| 与 图 层 链 接 (K) ES 2 
加] 图 层 控 空投 景 4U) 
[设置 为 默认 值 | | 复位 为 默认 值 | 上座 秋 交 区 认 值 -| [_ 夏 位 为 默认 值 一] 











图 3-53 添加 图 层 样 式 


0 


I) 单 击 “ 确 定 ” 按 钮 后 的 图 像 效果 如 图 3-54 所 示 。 
DB 





3-54 图 像 效 果 


0 EI el oS El SR | BS ar 





3-55 绘制 直线 


O05 为 图 层 添 加 “内 阴影 ”和 “渐变 和 合 加 ”图 层 样 式 ， 如 图 3-56 所 示 。 


新 变 要 加 
新 变 
混合 模式 (0): 正常 ~ 回访 色 
不 透明 度 Pp) se 100  %% 
j 交 [有 | 避 | 反 向 () 
样式 0 线性 =， 园 与 图 层 对 齐 旬 
角度 (N): (1!) 印度 








一 内 阴影 
一 结构 


混合 模式 (6): 正常 ~ 国 国 

不 透明 度 (0): 一 10  % 
角度 A): (0 度 辣 ] 使 用 全 局 光 (G) 
距离 0): /一 一 2 像素 


阻塞 (0): = 100  % 
大 小 (5): G 0 像素 























痪 前 全 六 一 


及 站 为 默认 什 县 位 为 蛙 认 值 

















设置 为 默认 值 夏 位 为 默认 值 











3-56 添加 图 层 样 式 


LO 复制 图 层 ， 并 调整 位 置 ， 如 图 3-57 所 示 。 





3-57 复制 并 调整 位 置 





es Et 











0 pa 使 用 “椭圆 工具 ”和 “ 国 角 矩形 工具 ”绘制 图 形 ， 如 图 3-58 所 示 . 


3-58 绘制 图 形 


© 将 图 层 重 命 J 9 “图 标 willl 为 图 层 添 加 i Dah “渐变 二 加 ” 1 人 
”如 图 3-59 所 示 ， 




























































































一 RM | 加 | 
结构 渐变 结构 
混合 模式 (6) 正常 本 Oj 正常 ” 
不 通明 度 O): 一 3 一 有 。 % ni = a 混合 模式 (6): 正常 ” 
“居于 于 于 于 于 于 于 于 于 时 
杂 色 MG 0 % 不 透明 度 (0): CS 34 % 
5 国 - : [| MR 和 
a 国 属相 
二 样式 0D: 线性 ~ 团 与 图 层 对 齐 () 角度 (A): (| ) 8 度 回 使 用 全 局 光 (G) 
鲜 A “二 
方法 Q): 条 和 ~ 角度 :人 人、 /1 90 度 距 高 D): CT 1 像素 
源 :器 居中 国 。 @ 边 妊 (6) 缩放 G): 一 100 % 扩展 R):， 一 10 % 
阻塞 (CO): ”> 0 9% 
AN 一作 设置 为 默认 值 ] [复位 为 默认 值 大 小 5): 6 ”0 像素 


























3-59 添加 图 层 样式 


O09 单 击 “确定 ”按钮 后 的 图 像 效 果 如 图 3-60 所 示 。 


图 3-60 图 像 效 果 





7 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 图 3-61 所 示 。 为 文字 图 层 添 加 “投影 ”图 
层 样 式 ， 如 图 3-62 所 示 。 











混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): 人 100 
角度 (A): (SS -有 ” 度 回 使 用 全 局 光 (6) 
中 高 Di: /一 一 2 像素 
扩展 R): 二 = 10  % 
大 小 国 : 0 像素 











3-61 输入 文字 图 3-62 添加 “投影 ”图 层 样 式 


717 确定 操作 后 的 图 像 效果 如 图 3-63 所 示 。 用 同样 的 方法 绘制 其 他 图 形 并 输入 文字 ， 
如 图 3-64 所 示 。 


Time Settings 





图 3-63 图 像 效果 图 3-64 绘制 图 形 并 输入 文字 
1 7 7 Me A mt SE 0 


Settings 





图 3-65 绘制 矩形 


7 AD 为 矩形 图 层 添 加 “ 描 边 ” “ 斩 变 二 加 ” “图 和 案 过 鳃 久 ” “外 发 光 ” “ 投 各 人 图 层 样 式 ， 
”如 图 3-66 所 示 . 
























































描 边 渐变 到 加 一 一 一 一 一 图 案 到 加 
一 结构 - 渐变 图 案 
大 小 (S): Ce 像素 混合 模式 (0): 亚 加 站] 仿 色 混合 模式 (6): 又 加 
位 置 (P): 内 部 ~ 不 透明 度 (P): WW 97 % 不 透明 度 (Y): 
混合 模式 (6)， 正常 ~ 新 朗 : 上 [|] 回扣) 
不肖 明度 0): 一 100 % | 样式 (): 个 ”| 回 S09 图 案 : FE 司 | [ 贴 归 原点 (A) 
一 寺 充 类 型 F)， 浙 变 ~ i CE: Re 
er 缩放 (5): 二 100 % 
淅 次: [| 网 反 向 w) | 一 团 与 图 层 榜 接 (9 
样式 (WD): 线性 7” 回 与 图 层 对 章 (6) 设 ET - == 
A [ 设置 为 默认 值 | | 复位 为 默认 值 | ee rrr 
角度 A): [| ， ] 50 度 问 仿 色 
编 没 CC: 一 zy 一 一 100 % 
设置 为 默认 值 | [ 复位 为 默认 值 
























































四 起 党 
结构 
混合 模式 介 ): 正常 
不 诅 明 度 (0): 一 一 一 100 o% 混合 模 式 (6): 正片 到 底 ~ 国 加 
杂 色 NG 0 % 不 透明 度 (0): 一 一 81  %% 
醒 = 用 度 (A): | ， | -30 ” 度 站 使 用 全 局 光 (6) 
图 素 st 
| 距离 上 Oj): (一 1 像素 
扩展 (P): 二 100 % 太 小 (5): ES 省 像素 
大 小 (9S): OO 1 像素 
品质 
让 : SE J 上 
ss [ | Oto $8 | S| Deiatit 
范围 R): 50  % Ge l 
a 0 % 时 图 层 控 空 投影 (U) 





保 圭 为 点 训 午 县 位 为 喜 恋 值 





设置 为 默认 值 夏 位 为 默认 值 
图 3-66 添加 图 层 样 式 
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Wb EA 








Photosho 热门 弗 PP 类 型 设计 从 入 门 至 到 精通 





fA 单 击 “确定 ”按钮 后 的 图 像 如 图 3-67 所 示 。 


Settings 





图 3-67 图 像 效果 


15 新 建 图 层 ， 绘 制 顶 部 高 光 ， 如 图 3-68 所 示 ， 


Settings 





3-68 绘制 高 光 


1 A /-a 再 次 使 用 “矩形 工具 ”绘制 矩形 ， 如 图 3-69 所 示 。 


Settings 





图 3-69 绘制 矩形 


1/ 将 图 层 重 命名 为 “小 矩形 ”， 为 图 层 添加 “内 阴影 ” “渐变 登 加 ”“ 图 案 登 加 ” 
和 “投影 ”图 层 样式 ， 如 图 3-70 所 示 。 











Re 一 靳 训 要 加 一 
一 新 变 - ss 
温 合 模式 (6): 正常 v 
不 透明 度 (D): zy 100 oo 赣 言 模式 (O): 亚 加 至 同 访 色 





不 透明 度 人 ): Ey 97 % 











角度 (A): (| ) 如 度 回 使 用 全 局 光 (G) 
距离 (0): 人 1 像素 ea) 
阻塞 (CO): ZS 4  %% 样式 册 ): 续 性 = 加 与 图 层 对 齐 癌 
大 小 (5): 和 1 像素 -i 
角度 (Wi 19 度 
品质 mw 


清关 全 二 10 % 


lL - 器 清 逐 锯齿 们 ) | Se 
杂 色 (N): 6 % 设置 为 默认 值 生 位 为 默认 值 


设置 为 默认 值 复位 为 默认 值 























图 案 秋 加 
图 案 





混合 模式 (6): 亚 加 本 
不 透明 度 人 NY): 25 16  % : 开 合 模式 折 ) ”正常 下 加 到 
不 透明 度 (0): 他 34 加 
图 案 : 器 J 
an 朋 度 (A): | 1 | -30 度 门 使 用 全 局 兴 (6&) 
缩放 (5): 大 100 史 sf 





中 高 (D): /一 0 像素 


3 


团 与 图 层 树 接 ( 
, 为 直 1 RE: TD 100 
设置 为 点 认 值 | | 复位 为 默认 值 扩展 (R) 


大 小 5): 全 朝 索 





3-70 添加 图 层 样 式 


7 CO 确定 操作 后 的 图 像 效 果 如 图 3-71 所 示 。 
O 


Settings 





图 3-71 图 像 效 果 


f0 使 用 “ 圆 角 矩形 工具 ”和 “钢笔 工具 ”绘制 图 形 并 输入 文字 ， 添 加 图 层 样式 后 
WA 的 效果 如 图 3-72 所 示 ， 然 后 将 图 层 重 命名 为 “ 主 图 标 ”， 


Settings 





图 3-72 效果 


全 为 川村 国语 添加 的 图 层 样 式 为 “内 发 光 ?” “渐变 合 加 ” 和 和 “4 如 图 





























am BN BI 
本 
0 be 
混合 模式 (6): 正常 ~ 混合 模式 (0): 亚 加 ~ 回 仿 色 
不 透明 度 (0): 一 7 一 一 0 ”% 不 透明 度 P): 一 2 一 一 22 % 混合 模式 人 @@): 强 光 
杂 色 (: G 0  % 渐 交 : [| 一 | [| 反 向 (R) 不 透明 度 (D): 50 % 
da 加 样式 (): 线性 ~ 团 与 图 层 对 齐 () IN 
- 角度 Aj: | 上 ) 5 度 回合 用 全 局 光 (G) 
方法 (Q): 杀 和 ~ 缩放 (5): 一 100  % 距离 (D): 4 2 像素 
本 ba a EE 扩展 (R): 0 
大 小 (S): 一 5 ”像素 大 小 (5): CC” 0 像素 




















图 3-73 为 “ 主 图标 ” 添 加 的 图 层 样 式 
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Wb IE EA 








更 哆 ZU Photoshop 热门 命 PP 类 型 设计 从 入 门 到 精通 
汪汪 








gp fh 为 文字 图 层 添加 的 图 层 样式 为 “投影 ”， 有 具体 参数 设置 如 图 3-74 所 示 。 使 用 “ 拢 
ae 形 是 和 情丝 EE 





























投影 
结构 
混合 模式 (6): 正常 > 
不 透明 度 (D): 区 %% 
角度 (A): (上 1 8 度 回 使 用 全 局 光 (G) 
距离 D): 全 = 1 像素 
扩展 (R): 100  % 
大 小 (5): G 0 像素 Does Settings 
图 3-74 “投影 ”图 层 样式 参数 设置 图 3-75 绘制 矩形 并 填充 渐变 色 


2 将 图 层 重 命名 为 “投影 ”， 将 图 层 向 下 移动 几 层 ， 完 成 制作 ， 如 图 3-76 所 示 。 


Docs Settings 





图 3-76 完成 制作 


ED 进度 条 

进度 条 是 在 处 理 任 务 时 ， 实 时 地 ， 以 图 片 形 陈 显示 处 理 任 务 的 速度 、 完 成 度 、 剩 余 未 
完成 任务 量 的 大 小 ， 以 及 可 能 需要 处 理 的 时 间 。 在 APP 界面 中 ， 进 度 条 一 般 用 于 显示 加 
载 进 度 、 播 放 进 度 ， 以 及 设置 亮度 、 音 量 的 大 小 等 ， 除 了 音 规 的 以 长 条 状 显示 外 ， 还 有 圆 
环形 显示 ， 如 图 3-77 所 示 。 


BASS HlGH 
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“设计 思路 


本 实例 制作 的 是 长 条 状 进度 条 ， 通 过 简单 图 形 的 绘制， 并 添加 不 同 的 图 层 样式 ， 实 现 
度 条 的 立体 效果 ， 制 作 流 程 如 图 3-78 所 示 。 








® -一 一 9 一 


图 3-78 制作 流程 


“制作 步骤 


知识 点 Re 
光盘 路 径 人 





























0 7 新 建文 档 , 添加 背 丸 素材 。 使 用 “ 圆 角 珑 形 工具 ”绘制 圆 角 短 形 ， 如 图 3-79 所 示 。 
将 图 层 重 命名 为 “ 底 1”， 为 图 层 添 加 “斜面 和 浮雕” 图 层 样 式 ， 如 图 3-80 所 示 。 


箱 而 和 有 天 
结构 
样式 0: 外 全面 ”~ 
方法 Q): 平 骨 。 











ns Et 


深度 0): 3 100 % 
方向 ]: @ 上 四 下 
大 小 (2): 本 5 像素 


软化 (F): =” 12 像素 


阴影 








角度 (N): | 90 度 
| 。 ) 回 使 用 全 局 光 (G) 
高 度 : 一 30 人 度 
光泽 等 高 线 : | -| 加 湖人 占 () 
高 光 模式 (H): ; ~ 
不 透明 度 (O): 5 60 % 
阴影 模式 (A): 正片 一 底 ~ 国 国 
不 透明 度 (C): 5 ee 5 % 





| 设置 为 默认 值 。| | 复位 为 默认 值 











图 3-79 绘制 圆 角 算 形 图 3-80 添加 图 层 样式 


LA 继续 为 图 层 添 加 “内 阴影 ” “内 发 光 ” “渐变 二 加 ” “外 发 光 ,” 和 “投影 时 > 图 
me | why, | rapt lB ra 






























































内 阴影 内 发 光 渐变 又 加 
结构， 2 | 一 
混合 模式 (6): 正常 了 
混合 模式 (6): 正常 ”计量 人 一 % 混合 模式 (0): 正常 ”回信 色 
不 透明 度 (D): 1  % 杂 色 W: 5 0 % 不 透 阴 度 人 ): Siw | 
人 外 ， © 国 oO | :| [| 口 扣 i 
角度 (A): ( 上 ) 50 度 回 使 用 全 局 光 (G) "是 “一 一 了 二 
本 Es 样式 (0): 线性 ~ 加 与 图 层 对 齐 钻 
距离 (D0): (5 1 像素 3 让 
阳 塞 (: 于 0 % 方法 QQ: 柔和 ~ 角度 NW): 上 ) 80 度 
i 源 :加 居中 人 E) ”加 边缘 (G) Bag 
太 小 (5S): CS 0 像素 阴 塞 (0: 4 5 本 缩放 (5): 25 100  % 
器 丘 | 大 小 (5): Cs 像素 
品质 [设置 为 默认 值 。] | 复位 为 默认 值 | 
等 高 线 :| -| ;iB 
ee 一 一 - 本 高 线 : ’ 4 ”| 加 | 消除 锯 具 人) 
2 范围 R): a 50  %% 
| 设置 为 默认 值 | | 复位 为 默认 什 420): G 0 县 
| 设置 为 默认 值 。| | 复位 为 默认 值 
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外 农 光 投影 
en - 结构 
eb “ 混合 模式 @): 正常 ~[ 
"通明 度 (0): 一 CT . 
不 透明 度 (0) 35  % 不 透明 度 (0): ee 70 % 
杂 色 N: 一 0 % A 
| Ol | 角度 (A): | ! )30 ” 度 回 使 有 全 局 光 (G) 
图 素 距离 (D0): 4 - 像素 
方法 (Q): 杀 和 ~ 扩展 RE 0 % 
扩展 P): == 0 % 大 小 (5): 65 | 像素 
大 小 (5): G 1 像素 一 品质 
品质 各 | 4 消除 锯齿 (0) | 
等 高 线 : [A 口 湖 费 占 (0) 杂 色 M: 一 0 % 
范围 R): 一 50 % 
人 可 图 层 控 空 投影 (J 
| 设置 为 默认 值 复位 为 默认 值 
设置 为 默认 值 复位 为 默认 值 














3-81 添加 图 层 样式 


LI 单 击 “确定 ”按钮 后 的 图 像 效 使 用 “ 圆 角 和 矩形 工具 ”绘制 圆 
7 果 如 图 3-82 所 示 。 前 晤 宙 中 时 国 量 早日 




































































图 3-82 图 像 效 果 图 3-83 绘制 圆 角 和 珑 形 
、 = 一 3 = 习 4 S 本 2 Ey Es 过 
入 将 图 层 重 命名 为 “ 底 0 | 为 图 层 添 加 “斜面 和 浮 膨 ” “内 阴影 ?” “颜色 登 加 ” “ 渐 
™ 2 NA _- 
S| 变 登 加 ”和 “投影 ”图 层 样 式 ， 如 图 3-84 所 示 。 
和 斜面 和 浮 峙 -一 内 阴影 
ar RISE 结构 
mm 混合 模式 (5): 正常 ~ EN 
方法 (Q): 平滑 v 
深度 D)，< 100 ” % 不 透明 度 (D): es 60 让 
iO OF 角度 (A): (| )50 度 回 使 用 全 局 光 (G) 颜色 秋 加 
hE 像素 — -颜色 - 
软化 中 一 8 像素 距离 DO): (一 一 1 像素 ey 
阴影 阳 塞 CC: Ce 0  % 混合 模式 人 ) 正 党 四 
角度 (: [90 度 大 小 (6): Ce 3 像素 不 透明 度 (0): 2 100 % 
OD 一 品质 ET | [破位 为 默认 什 
光泽 等 高 线 : "| 辣 消 除 锯 具 届 ) 等 高 绪 ; -| 问 清 祭 锯 占 仙 
高 光 模 式 (H): 小 色 ”| 杂 色 (NN): EP! 0 % 
不 透明 度 (0): 2 20 % | 
阴影 模式 (A)， 正片 委 底 - Em | 设置 为 默认 值 | | 复位 为 默认 值 
不 透明 度 (C): 5 10  % 
[设置 为 默认 值 | [ 复位 为 默认 值 | 



























































一 渐 宫 可 加 一 一 一 一 = 投 本 
靳 变 - _ 结构 
混合 模式 (0)， 正常 ~ 口 f 色 i 
不 透明 度 p): 一 一 一 100”% 况 合 模式 (6): 正和 vl 

渐变 :[ ”|[v] 团 反 向 R) 不 透明 度 (0): = 70 % 
样式 QD 线性 ” 团 与 图 局 对 齐 (0 /AN 
ee 角度 :| 上 8 度 器 使 用 全 局 光 (G) 
角度 M:( | ) 0 度 ww 
缩放 G): 一 10 % 距离 D): 人 1 像素 
设置 为 默认 值 [复位 为 默认 值 ET 

















图 3-84 添加 图 层 样式 


单 击 “确定 ”按钮 后 的 图 像 效 
采 如 图 3-85 所 示 。 


po 


(JO 


Es 


全 





3-85 图 像 效 果 


人 〇 9 使 用 “ 圆 角 短 形 工具 ”绘制 贺 
角 短 形 ， 如 图 3-87 所 示 。 


复制 
I 


一 图 案 亚 加 





， 清 除 图 层 样 式 ， 设 
> 
图 层 样式 ， 如 图 3-86 所 示 。 





图 案 





混合 模式 (6): 正片 又 底 


图 案 : 


缩放 (5): 











Vv 








图 3-86 添加 “图 案 荆 加 ” 


将 图 层 重 命名 为 $2 
KM 图 层 添加 “斜面 和 浮雕 ”图 层 


样式 ， 如 图 3-88 所 示 。 


不 通明 度 M): 9? 


与 图 层 链 接 的 


Yr 


% 


加 ”| 贴 式 原点 (A) 


100 % 





图 层 样式 


为 




















斜面 和 浮雕 
一 结构 
样式 (TD): 内 斜面 
方法 (Q): 平滑 ~ 
深度 DA 100  % 
方向 : 加 上 下 
大 小 CD: A 二 一 2 像素 
软化 所 em | 5 像素 
阴影 
角度 NW: 、90 度 
| 。 ) 回 使 用 全 局 光 (G) 
高 度 “一 30 度 
光泽 等 高 线 : Pe 消 络 锯 占 中 
高 光 模式 (H): 滤 色 v[L | 
不 透明 度 (O): 40 % 
阴影 模式 (A): 正片 到 底 | 
不 透明 度 O: TT 一 一 10  % 


ns Et 








| 设置 为 默认 值 | | 复位 为 默认 值 | 











图 3-87 绘制 圆 角 和 矩形 


续 为 图 层 添 加 “内 阴 最 5” 
图 3-89 所 示 。 


有 登 力 


(4 内 发 光 ,” “渐变 pi 


WO 


图 3-88 添加 图 层 样式 


”7 和 “ 投 影 ?” 图 层 样 式 ， 妇 














一 内 阴影 
结构 
混合 模式 (6): 正常 -| | 
不 透明 度 (0): 一 一 40  % 


角度 :| | ) 56 麻 门 使 用 全 局 (6) 


距离 D): 一 一 1 

















像素 
阻塞 (0): (一 0 % 
大 小 (5): OO 0 像素 
品质 - 
等 高 线 : [4 加 湖 逐 据 齿 (0) 
末 色 人 N): 4 0 oo 


设置 为 默认 值 复位 为 默认 值 



































内 发 光 
结构 
混合 模式 6): 滤 色 v 
不 透明 度 (0): = 50  % 
杂 色 (N): (= 0 % 
@[ Jo | 
. 图 素 
方法 (Q): 柔和 ~ 
源 :器 居中 提 加 边缘 {6) 
阳 塞 CO: = 一 一 0 % 
大 小 (): Ce 像素 
品质 
#8: | S| Deiat 
范围 R): 一 J 了 = 一 50 % 
拉动 :C= 0  % 
设置 为 默认 值 复位 为 默认 值 











91 








Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 
















































































渐变 伙 加 投影 
- 渐变 一 一 - - 一 结构 
混合 模式 (DO): 正常 v | 以 色 混合 模式 人 @): 正常 ~ El 
不 透明 度 (P): 100  % 不 透明 度 (0): se 100 % 
新 究 : 反 向 (R) 角度 (A): ( | ) 9 度 器 使 用 全 局 光 (G) 
样式 (0D): 线性 Y 加 与 图 层 对 齐名 距离 D); Ps = 像素 
角度 :| we ) 90 度 扩展 QR): CS 0 % 
大 小 (9): 村 一 6 像素 
缩放 (5): 5 100  % 
-品质 
设置 为 默认 值 复位 为 默认 值 等 言 线 : [人 
末 色 人 N): G 0 % 
回 图 层 控 空投 影 (U) 
设置 为 默认 值 复位 为 默认 值 

















3-89 继续 添加 图 层 样 式 


1717 确定 操作 后 的 图 像 效 果 如 图 3-90 所 示 。 复 制 “ 绿 和 色 ” 图 层 ， 清 除 图 层 样 式 ， 重 
新 添加 “图 策 嫩 加 ”和 “投影 ”图 层 样 式 ， 如 图 3-91 所 示 。 












































一 图 案 秋 加 投影 
人 结构 - 
a 混合 模式 (6) 正常 - 国 四 
不 透明 度 (D): ZF 90  % 
图 案 : 可 [ 贴 紧 原点 (A) | /AN 
| | 贴 茶 原 点 (A) 角度 (A): | ) 90 度 回 使 用 全 局 光 (G) 
2 回 与 图 用 负 接 (9 EC 距离 DO): 人 1 像素 
扩展 REG 0 % 
大 小 (5): G 1 像素 
图 3-90 图 像 效 果 图 3-91 添加 图 层 样 式 


了 7 人 7 设置 填充 为 0%， 此 时 的 图 像 效 A 1 使 用 “椭圆 工具 ”绘制 正 圆 ， 
/2 wD 儿 山 wD 3 








\ 2 
一 
图 3-92 图 像 效 果 图 3-93 绘制 正 贺 


pi 为 图 层 添加 “人 儿 面 和 浮雕 ”“ 内 阴影 ” “渐变 合 加 ”“ 投 影 ” 图 层 样 式 ， 如 
图 3-94 所 示 。 


斜面 和 浮雕 -一 内 阴影 


样式 (1D): 内 斜面 
方法 (Q): 平滑 ~ 混合 模式 人 ): 正常 > 加 到 
不 透明 度 (0): 一 一 一 7、 100 ”% 



































深度 DO): 人 T= 一 100 % 
:OO 上 @ 下 a 一 
A): 证 
了 -一 相交 角度 (A) wp 90 ” 度 加 使 用 全 局 光 (G) 
软化 Fi 一 一 7 像素 距离 O): Le 1 像素 
阴影 阳 塞 (CO: oo 0 % 
角度 NM): 。 90 度 
N S): /Ts 
( 。 ) 器 使 用 全 局 光 () da - bs 
高 度 : 一 30 讼 品 
品质 
光泽 竺 高 纺 | 4 回 消除 刀具 (0) 
言 引 ， 和 Sa 让 一 
高 光 模 式 (H): 源 色 - 村 高 续 : [A 清 队 锯齿 
不 透明 度 (0): < 0  % 隶 色 ( 人 :CC 0 % 
阴影 模式 (A)， 正片 县 底 ~ 加 天 一 
不 透明 度 (QO: AR 10  % 设置 为 默认 值 复位 为 默认 值 








[ 设 本 对 | [ 页 本 7 各 半 | 


























渐变 严 加 
一 潮 度 一 一 一 
混合 模式 (0): 正常 Y 
不 透明 度 (P): D 
4 
样式 (0): 线性 v 


角度 NW: | 550。 度 


缩放 人): 一 人 


设置 为 默认 值 复位 为 默认 值 





中 | 仿 色 
100  % 








吕 尽 回 fR) 











VY| 与 图 层 对 齐 们 


100 % 














1 确定 操作 后 
BD i 





mn 


混合 模式 (6): 正常 M 
不 透明 度 (0): ”70 % 


角度 (A): | wy )】 8 度 回 使 用 全 局 光 () 
中 高 D): 一 1 ”像素 
































扩展 R: 全 0 % 
大 小 8): 一 一 0 像素 
品质 
等 高 线 : [4 消除 锯 占 吕 
杂 色 NT 一 0 % 
可 图 层 近 空投 影 () 














[设置 为 默认 值 。] | 复位 为 默认 值 | 











3-94 添加 图 层 样 式 


的 图 像 效 果 如 图 





使 用 [到 的 和 忆 于 和 “由 
定形 状 工具 ”绘制 图 形 ， 如 图 


fa 


SO GR 





图 3-95 图 像 效果 

















斜面 和 浮雕 
样式 TD): 内 斜面” 
方法 (Q): 平滑 ~ 
深度 D): 3 100  % 
方向 :@ 上 QA 下 
大 省 一 2 像素 
软化 一 05 一 一 5 像素 
阴影 
角度 (VJ: 、50 度 
| 。 ) 回 使 用 全 局 光 (G) 
Ba 30 度 
3 和 | 4 问 消除 锯 点 () 
高 光 模式 (H): 滤 色 ~ | 
不 透明 度 O0): 一 一 40 % 
阴影 模式 (9): 正片 县 底 ~ 国 国 
不 透明 度 (0 10 % 

















ET ET 











渐变 亚 加 

渐变 

混合 模式 (0O): 正常 Md 仿 色 
不 透明 度 (P): = 100 % 


轻 :[ | Re) 
样式 (): 线性 ~ 回 与 图 层 对 章 人 


前 度 (N): (! 90 度 
缩放 (5): 一 一 一 一 一 一 100  % 























< 











设置 为 炭 认 入 办 





图 3-96 绘制 图 形 


pip mn 重 命名 为 “显示 ”， 为 图 层 添加 “斜面 和 浮雕”“ 内 阴影 ”“ 内 发 光 ”“ 浙 
变 痘 加 ” “外 发 光 ?” 和 和 “ 投 早 ,本 人 1 图 层 样 式 ， 如 图 (OW oil 





- 内 阴影 一 
结构 


混合 模式 6): 正常 | 
不 透明 度 (0): = 一 一 40  % 


角度 (A): | | ) 56 。 度 回 使 用 全 局 光 人 G) 


中 高 D): 于 一 了 ”像素 
阻塞 (0): < 0 9 
大 小 5): A 一 0 ”像素 


品质 


等 高 线 : PF 消除 锯 频 QD 


杂 色 (N): (5 0 % 


设置 为 默认 值 复位 为 默认 值 



























































- 外 发 光 
结构 
混合 模式 (E): 正常 
不 透明 度 (0): 一 2 一 % 
隶 色 NI 0 
国 oO 
图 素 
方法 (Q): 柔和 ~ 
扩展 P): CC 0 % 
大 小 (5): G 1 像素 
品质 
二 :| 4 回 | 消除 锯齿 () 
范围 (R): 5 50 % 
拌 动 0): G 0 % 








设置 为 默认 值 复位 为 默认 值 














图 3-97 添加 图 层 样 式 





























结构 
混合 模式 (6): 滤 色 M 
不 透明 度 (0): 一 23 一 一 50  % 
杂 色 人 NI 0 % 
S| 用 加 [| “|| 
图 素 一 
方法 (Q): 柔和 ~ 
源 :人 居中 人 ) ”加 边缘 (G) 
阻塞 (0O): G 0 % 
大 小 G): 人 1 笃 素 
品质 
等 高 线 : 4 同 消 除 锯 齿 (L) 
范围 (R): 全 % 
拉动 0): (= 0 % 
| 设置 为 默认 值 “」 | 揽 位 为 默认 值 | 




















投影 





混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): 一 ?= 一 一 60  % 


角度 :| 上 】 56 。 度 加 使 用 全 局 光 () 





距离 D): Sr 3 像素 
扩展 QR): Ce 0 % 
大 小 G): 和 7 像素 


等 高 线 : [A 回 清 逐 据 齿 () 


末 色 (N): 4 0 % 


图 层 控 空 投影 (J) 
设置 为 默认 值 复位 为 默认 值 


























93 





En EA 人 9: 











9 


Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 


A 人 CO 确定 操作 后 的 图 像 效 果 如 图 70 复制 图 层 ， 清 除 图 层 样式 ， 粘 
3-98 所 示 。 WA 贴 “绿色 拷贝 ”图 层 的 图 层 样 


去 上 如 图 3—99 nan 





图 3-98 图 像 效果 图 3-99 复制 图 层 并 粘贴 图 层 样式 
2 () 使 用 “ 模 排 文 学 工具 ”输入 文字 并 添加 所 需 图 层 样 式 ,完成 绘制 , 如 图 3-100 所 示 。 





图 3-100 完成 绘制 


EB 开关 演 包 
滑 块 按钮 用 于 滑动 设置 相应 的 选项 ， 通 常 同 左 或 向 右 滑动 来 设置 两 个 不 同 的 选项 ， 与 
ON/OFF 按钮 效果 相同 。 


呈 / 设计 思路 





本 实例 制作 的 是 滑 块 按钮 。 通 过 设计 突出 的 滑 块 ， 吸 引用 户 去 点 击 滑 动 。 向 左 或 向 右 
滑动 后 显示 为 颜色 和 文字 变化 ， 制 作 流程 如 图 3-101 所 示 。 


om oR, 


图 3-101 制作 流程 


4 




















“ 圆 角 矩形 工具 ”、“ 方 框 模糊 ” 滤 镜 、 图 层 样 式 
第 3 章 \3.1.6 开关 按钮 


























OF 使 用 “ 圆 角 短 形 工具 ”绘制 圆 角 短 形 ， 如 图 3-102 所 示 。 将 图 层 重 命名 为 “ 底 
层 ”， 双 击 该 图 层 ， 在 打开 的 对 话 框 中 选择 “内 阴影 ” 复 选 框 ， 设 置 相关 参数 ， 
如 图 3-103 所 示 。 











内 阴影 
混合 模式 (6): 正片 妥 底 | 
不 透明 度 (D): = 81 % 
角度 (A): | * | 90 度 站 使 用 全 局 光 (G) 
距离 上 0): 一 于 ”5 像素 
阳 塞 (FS 8 % 
大 小 9): 二 z= 一 一 40 像素 
品质 
高 线 : | -| 回 注 用 刀具 人 
杂 色 N: 二 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 





























图 3-102 绘制 圆 角 和 矩 形 图 3-103 设置 “内 阴影 ” 
《人 
J 
外 发 光 
混合 模式 (E): 滤 色 ~ 
不 透明 度 (O): PS 23 % 
颜色 到 加 杂 色 (N): C 0 % 
颜色 6 | 
混 休 模式 昌 ): 正常 ~ 国 国 图 素 
不 透明 度 (0): lo  %% 方法 (Q): 柔和 > 
扩展 (P): EE 3 % 
| 设置 为 点 认 值 | | 复位 为 黑 认 值 | 大 小 8): = 一 一 5 像素 
品质 
入 训 续 :| - 消除 锯 频 人) 
范围 (R): rs 50 % 
拉动 Q): < 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 




















3-104 设置 “颜色 又 加 ”“ 外 发 光 ” 图 层 样式 的 参数 
(OO ee er ee rn dm 
WA 个 园 角 矩形 ， 将 图 层 重 命名 为 “外 框 ”， 调 整 图 层 到 “底层 ”图 层 的 下 方 ， 如 
图 3-106 所 示 。 





3-105 图 像 效果 3-106 绘制 矩形 并 调整 顺序 


935 


拉 沿 凋 汪 六 王国 济 In ddv 下 GEA3 











先 Photosho 热门 弗 PP 类 型 设计 从 入 门 至 到 精通 
一 一 


Ol 同样 , 为 “外 框 ? 图 层 设 置 图 层 样式 , 如 图 3-107 所 示 。 其 中 渐变 又 加 的 闫 色 为 ( 色 
A 0 a ee ly) 


































































































样式 据 边 程 未 ， 
结构 合 选 责 鞭 认 
混合 选项 ;回访 竟 合 选项 
ed 大 小 (S): 性 1 像素 可 伴 面 和 学 睛 混合 模式 (6): 正片 又 底 -Nl 
一 位 置 p): 外 部 ~ 号 等 高 线 不 通明 度 (0): 2 鸣 
| 纹理 混合 模式 (6): 正片 又 底 ” 口 纹理 角度 (A): | | 0 。 度 回 使 用 全 局 光 (G) 
不 通明 度 (0): 一 下 38 % 中 高 Dj: 二 5 个 素 
总 内 阴影 填充 类 型 (F): 颜色 回 内 发 光 阻塞 (OC): 15  % 
回 内 发 光 < 大 小 (5): 32 ”像素 
口 光 滩 疡 色 : 本 时 加 光泽 - 
证 器 颜色 到 加 品质 
本 颜 回 渐变 到 加 二 :| | 浊 
团 新 变 亚 加 国 天 等 高 续 : ”| 同 消除 锯 频 (0) 
] zh . 
one 加 外 发 光 杂 色 (N): 5 0 % 
i 一 一 一 站 投影 | 设置 为 默认 值 | | 复位 为 默认 值 | 
— a 1 又 了 
样式 渐变 本 加 得 二 ee 
渐变 混合 选 珊 野 认 
瘟 语 选项 :时 A 混合 模式 (0): 下 党 门 仿 色 右 射 面 和 学 周 混合 模式 (E): 正常 和 
口 斜面 和 浮 央 本 口 等 高 线 me 
回 等 高 线 不 透明 度 (p): 3 100 % 门 教理 杂 色 (N): 所 0 oh 
局 纹理 淅 区 : [ER 癌 反 向 () 可 指 边 5 国 OOT 
团 描 边 样式 (0): 径 向 Y” 轩 与 图 层 对 齐 (D 园 内 阴影 图 素 
避 内 阴影 角度 (NW): | | 1s0 度 -一 方法 (Q): 柔和 ~ 
口 内 农 光 i 扩展 (P): 43 0 % 
| A: 缩放 (5): 二 94  % 回 颜色 到 加 rie 
一 可 新 检 亚 加 人 5 像素 
口 颜色 到 加 [设置 为 默认 值 _」 | 复位 为 默认 值 | 口 图 案 秋 加 品质 
新 变 要 加。 本 
图 案 到 加 癌 投 影 等 高 线 ; rE | 消除 锯 频 人 D 
加 外 发 光 人 本 
回 投影 抖动 (0): 4 0 % 





上 设置 为 默认 值 | | 复位 为 默认 值 | 











图 3-107 设置 图 层 样 式 
O05 单 击 “确定 ”按钮 后 的 图 像 效 06 绘制 另 一 个 圆 角 和 矩形 ， 将 图 层 重 
果 如 图 3-108 所 示 。 为 “ 滑 块 底 ”， 调 整 图 层 至 
图 层 ” 面 板 的 最 上 层 ， 如 图 3-109 所 示 。 


图 3-108 图 像 效 果 图 3-109 绘制 矩形 


0 = 双击 图 层 ， 添 加 图 层 样 式 ， 如 图 3-110 所 示 。 






































样式 Es ! 样式 es. 
滥 合 选 页 吉 认 二 混合 选 贡 吉 认 
局 判 面 和 洒 妥 混合 模式 (D): 正常 ~ 回访 色 局 笠 面 和 浮 赚 混合 模式 (6): 正片 又 底 | 
| 等 高 线 不 通明 度 (P): 61% 噩 等 高 线 ne Gn 
TS]=*. \ 
口 将 渐变 : 同上 反 向 (R) 纹理 角度 (A): | 、)120 ” 度 加 使 用 全 局 光 (G) 
门 指 边 样式 (D): 线性 ~ 团 与 图 层 对 齐 () E -一 中 高 D): 所 5 像素 
亲 = ye % 
i J ET 1 
内 发 光 ”- 光泽 
光泽 妆 放 (全 ): 99 9 颜色 亚 加 品质 
] 团 渐变 到 加 [A ee 
丫 颜色 到 加 | 设置 为 默认 值 | 复位 为 默认 值 ] 请 等 高 线 : 站 | 消除 锯齿 (0) 
. 
图 案 释 加 可 图 局 控 空 投 () 
外 发 光 | 设置 为 默认 值 | | 复位 为 默认 值 | 
习 投影 














图 3-110 添加 图 层 样式 








人 复制 一 个 图 层 ， 将 复制 的 图 层 重 命名 为 “ 滑 块 ” 
O 除 图 层 样 式 ， 如 图 3-111 所 示 。 

双击 图 层 ， 在 打开 的 对 话 框 中 选择 “渐变 全 加 ”选项 ， 设 置 相关 参数 ， 如 
WA 图 3-112 所 示 ， 





图 3-111 复制 并 移动 


将 其 向 上 移动 12 像素 ， 并 清 








渐变 亚 加 


渐变 

况 合 模式 (0): 正常 v 癌 仿 色 

不 透明 度 (P): 一 FU % 
浙 变 : 国 加 jv| 园 反 向 R) 
样式 (0D): 线性 v ”IY 与 图 层 对 齐 (D) 
前 度 (N): | 4 | 90 度 


争 所 (5);: 69 % 





| 设置 为 默认 值 | | 复位 为 默认 值 








图 3-112 添加 “ 淘 变 二 加 ”图 层 样 式 


7 0 确定 操作 后 的 图 像 效 果 如 图 3-113 所 示 。 复 制 一 层 ， 将 复制 的 图 层 重 命名 为 “ 滑 
块 投影 ”。 执 行 “ 滤 镜 ” | “模糊 ”| “ 方 框 模糊 ”命令 ， 如 图 3-114 所 示 。 





图 3-113 图 像 效果 


7 7 弹出 提示 对 话 框 , 单 击 “ 确 定 ” 按 钮 ， 
如 图 3-115 所 示 。 

7 D 在 弹出 的 对 话 框 中 设置 相关 参数 ， 
em 如 图 3-116 所 示 。 





es Photoshop CC 
\ 此 形状 图 层 必 须 经 过 棚 格 化 才能 处 理 。 是 天 要 栅 格 化 此 形状 ? 


确定 取消 








图 3-115 单 击 “确定 ”按钮 


| 党 这 加 中 视图 (V) ”窗口 (W) 帮助 (H) 





| 形 类 横幅 Ctrl+F 

€ 转换 为 智能 沾 往 (S) 

| 乱弹 库 (G)... 
自 适应 广角 (A)... Alt+Shift+Ctrl+A 
Camera Raw 让 筑 (C)... Shift+Ctrl+A 
箭头 校正 (R)… Shift+Ctrl+R 
液化 ( 口 … Shift+Ctrl+X 
油画 (O).. 
消失 点 (V)... Alt+Ctrl+V 


习 





日 


3-114 执行 “ 方 框 模糊 ”命令 





(PpP) 


国 100% 


半径 {R): 13| 像素 


[二 


3-116 设置 相关 参数 








5 
: 
职 : 





9% 


半 沙 洲 站 问 持 卫 国 酒 I| ddv Ge 














更 哆 ZU Photoshop 热门 全 PpPp 类 型 设计 从 入 门 到 精通 
CF 





IP 单 击 “ 确 定 ” 按钮 后 ， 使 用 键盘 上 的 方向 键 略 微 向 下 移动 ， 图 像 效 果 如 
A 

7 按 Ctrl+[ 组 合 键 ， 将 图 层 向 下 调整 3 层 ， 移 至 “底层 ”图 层 的 下 方 。 添 加 图 层 
蒙 版 ， 使 用 黑色 的 “画笔 工具 ”涂抹 右 侧 多 余 的 部 分 ， 效 果 如 图 3-118 所 示 。 














图 3-117 向 下 移动 图 3-118 涂抹 蒙 版 
7 人 反 绘 制 矩形 并 复制 两 个 ， 单 击 “ 水 平 居中 分 布 ”按钮 ， 如 图 3-119 所 示 。 选 择 “ 矮 
形 1”， 双 击 进 入 “图 层 样 式 ” 对 话 框 ， 设 置 “内 阴影 ”和 “外 发 光 ” 图 层 样 式 ， 
如 图 3-120 所 示 。 


















































内 阴影 外 发 光 
混合 模式 (8) 正片 又 底 ~ 国 Es My 
不 透明 度 (0): 一 7 一 一 人 三 一 
~ 又 六 | oa 26 % 杂 色 人 N): OO 0 % 
角度 (A): | ， | 90 ” 度 回 使 用 全 局 光 (G) © [| 
距离 上 O): 四 一” 5 像素 图 素 
阴 塞 O: 于 0 % 方法 Qj: 条 和 
大 小 (5): 本 5 像 喜 扩展 (P): 人 0 % 
大 小 (5): 本 5 像素 
品质 
等 高 线 [4 
高 绪 : ~| 加 ] 消除 锯齿 们 ) 
i | 和 | ”| 回 消 除 缉 占 (0) 
末 色 (N): G 0 % 范围 (R): ZS 50  % 
[设置 为 默认 值 | [ 复位 为 默认 值 | ES 0 
[办 和 站 位 为 默认 值 ] 
图 3-119 绘制 矩形 图 3-120 添加 图 层 样 式 


1 /人 单 击 “确定 ”按钮 后 的 图 像 效 果 如 图 3-121 所 示 。 复 制图 层 样式 ， 选 择 “ 和 矩形 
O 1 找 贝 ”和 “和 矩形 1 拷贝 2” 图 层 ， 粘 贴图 层 样式 ， 如 图 3-122 所 示 。 





图 3-121 图 像 效果 图 3-122 粘贴 图 层 样 式 的 效果 


7 使 用 | 入 排 文字 开具 输入 对, 图 8 123 所 区 加 为 文字 图 属 枯 大 图 层 祥 六 | 


如 图 3-124 所 示 。 





描 边 外 发 光 


























结构 结构 
混合 模式 {E): 正常 ~ 
大 小 (5): G 1 像素 和 
a 和 不 透明 度 (D): 44 % 
位 置 P): 外 部 杂 色 人 N): 0  % 
混合 模式 (8) 正常 ~ a5 国 
不 透明 度 (O): 34 % 图 素 
方法 (Q@): 柔和 
HIF): 下 
填充 类 型 F): ”颜色 扩展 (P): 4 0 % 
疡 色 : 国 国 大 小 (5): 5 ”像素 
品质 
等 高 线 : ~ 消除 费 具 仙 
范围 从 ): 50 % 
抖动 D): G 0 中 











图 3-123 输入 文字 图 3-124 添加 图 层 样式 


7 四 单 击 “确定 ”按钮 ， 完 成 效果 如 图 3-125 所 示 。 将 除 背 景 外 的 所 有 图 层 选中 ， 
人 单 击 息 标 右键 ， 选 择 “ 从 图 层 建立 组 ”命令 ， 复 制 组 ， 并 修改 颜色 、 文 字 等 ， 
制作 开关 的 另 一 个 状态 ， 如 图 3-126 所 示 。 


图 3-125 完成 效果 图 3-126 开关 的 另 一 个 状态 


项 名 搜索 洋 


搜索 栏 是 用 于 搜索 页 面 内 容 的 控件 ， 由 搜索 框 和 搜索 按钮 组 成 。 部 分 搜索 栏 还 提 傣 搜 
索 下 拉 列 表 ， 根 据 相 应 的 关键 字 显 示人 列表 内 容 。 


坊 





SET 


本 实例 制作 的 是 搜索 栏 ， 绘 制 贺 角 和 矩形 作为 搜索 框 ， 绘 制 放 大 镜 图 形 作 为 搜索 按钮 ， 
为 图 形 添 加 图 层 样 式 ， 使 其 更 具 层 次 感 ， 制 作 流 程 如 图 3-127 所 示 。 


Use 
User 
User Interfamecelll) 机 


3-127 制作 流程 
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半 沙 洲 本 I 闫 了 匡 国 注 IN ddvE Ge 














更 哆 ZU Photosho 热门 全 PP 类 型 设计 从 入门 到 精通 
EE OO 





By 制作 步 又 


“ 贺 角 矩形 工具 ” 


























知识 点 


、 图 层 相 





F 式 、 复 制 及 烙 贴 图 层 样 式 











光盘 路 径 0 


LT 新 建 空 白文 档 ， 使 用 “ 圆 角 和 珑 形 工具 ” 
命名 为 “搜索 框 ”， 


图 3-128 绘制 圆 角 和 扼 形 


02 





继续 添加 “ 赢 色 过 hn 
a Wo 3 ON sl 


为 图 技 添 加 “ 描 边 











绘制 圆 角 和 矩形 ， 如 图 3-128 所 示 。 将 图 层 重 
力 ? 和 和 “内 阴 最 5” 图 层 样 式 ， 如 图 B20 P/ha 





























颜色 到 加 
颜色 
混合 模式 (6): 正常 ~ 加 
不 透明 度 (O): 33 % 





| 设置 为 默认 值 | | 复位 为 默认 值 | 











3-130 添加 “颜色 到 加 ”图 层 样 式 


使 用 多 种 绘图 工具 绘制 放大 镜 ， 如 图 3-132 所 示 。 将 图 层 重 命 名 为 “搜索 图 标 ” 


为 图 质 添 加 


图 3-132 绘制 放大 镜 


100 





O05 果 如 图 3-131 所 示 。 


描 边 内 阴影 
结构 结构 
大 小 G): G 1 像素 混合 模式 (6): 正常 ~ 国 国 
位 置 (P):; 外 部 ~ 不 透明 度 (0O): 27  % 
温 合 模 式 (6): 正常 ” 
(A): ed 县 司 旋 
ee 到 一。 角度 (A) I 90 度 站 使 用 全 局 光 (G) 
距离 (0): 人 1 像素 
填充 类 型 人 fF): 渐变 阻塞 (QO): < 0 % 
渐变 : [| 回 反 向 (R) 大 小 (5): 于 5 像素 
样式 (WD): 线性 ~ ” 团 与 图 层 对 齐 (G) 品质 
i A 和 守 高 线 : | 注 介 8 
缩 帮 (CO): 100 % 杂 色 (N): 可 
| 设置 为 Bi 值 | 夏 位 为 gi 值 | 医 SRITRTNESESTTTT 司 
图 3-129 添加 图 层 样 式 
三 未 尘 > 几 zl 0 高 
图 层 样 L 设置 填充 为 %， 此 时 的 图 像 效 





图 3-131 图 像 效果 


“原色 晤 加 ”和 “外 发 光 ” 图 层 样 式 ， 如 图 3-133 所 示 。 














颜色 亚 加 外 发 光 
颜色 结构 
混合 模式 介 ): 正常 下 混合 模式 {E): 正常 v 
不 透明 度 (O): y 100  % 不 透明 度 (O): 47 
杂 色 (N): 6 0 
| 设置 为 默认 值 | | 揽 位 为 默认 值 | 6 [| 
图 素 
方法 (Q):; 柔和 > 
扩展 (P): 人 0 
大 小 (5): 宅 10 





图 3-133 添加 图 层 样式 





确定 操作 后 的 图 像 效 果 如 图 3-134 所 示 。 输入 文字 并 绘制 线段 , 复制 “搜索 图 标 ” 
图 层 的 图 层 样 式 ， 在 “Use” 图 层 上 粘贴 图 层 样 式 ， 效 果 如 图 3-135 所 示 。 使 用 
“ 圆 角 和 矩形 工具 ”和 “ 自 定形 状 工具 ”绘制 图 形 ， 如 图 3-136 所 示 。 


图 3-134 图 像 效果 图 3-135 输入 文字 图 3-136 绘制 图 形 


将 图 层 重 命名 为 “下 拉 框 ”， 为 图 层 添 加 “外 发 光 ” 图 层 样 式 ， 如 图 3-137 所 示 。 
使 用 “直线 工具 ”绘制 线条 ， 使 用 “和 矩形 工具 ”绘制 和 矩形， 如 图 3-138 所 示 ， 























外 发 光 
结构 
混合 模式 ({E): 正常 Dd 
不 透明 度 (0): & 5 % 
来 色 (N): 5 0 oo 
5 | | 
司 训 
方法 (Q): 柔和 ~> 
扩展 (P): 人 0 % 
大 小 (5): 尼 10 像素 
3-137 添加 “外 发 光 ” 图 层 样式 3-138 绘制 线条 与 矩形 
使 用 “ 横 排 文字 工具 ”输入 文 添加 小 手 图 片 ， 完 成 绘制 ， 如 
字 ， 如 图 3-139 所 示 。 图 3-140 所 示 。 


User 
LJser 


Llser Interfaeelll) 


User InterfacellJl) 





3-139 输入 文字 3-140 完成 绘制 


人 DB 列表 菜单 


列表 菜单 是 指 将 多 个 列表 左 对 齐 展 示 ， 可 以 增加 向 右 箭头 表明 是 否 还 有 下 级 。 一 般 通 
过 漂亮 的 配色 、 图 标 组 合 来 设计 ， 使 得 菜单 更 多 加 丰富 、 美 观 。 


Photoshop 热门 OPP 内 型 设计 从 人 入门 到 精通 








PR 设 计 思 响 


本 实例 绘制 的 列表 菜单 的 外 形 为 贺 角 矩形， 在 圆 角 和 矩形 中 将 内 容 从 上 到 下 以 列表 的 方 
式 展 示 主 要 与 次 要 信息 , 次 要 信息 的 文字 颜色 更 上 暗 、 字 号 更 小 。 制作 流程 如 图 3-141 所 示 。 


Proflle 


< 轩 MS le [SS 


六 Settings 


(1) Log out 





图 3-141 制作 流程 
“制作 步 又 


知识 点 “ 圆 角 矩形 工具 ”、 图 层 样式 、 智 能 对 象 、“ 添 加 杂 色 ”站 镜 
光盘 路 径 第 3 章 \3.1.8 列表 菜单 


OF 新 建文 档 ， 添 加 率 材 作为 背景 。 使用“ 圆 角 和 矩形 工具 ”绘制 贺 角 矩形 ， 如 图 
/ 3-142 所 示 。 
LI27 将 图 层 重 命名 为 “底层 背景 ”， 为 图 层 添加 “ 描 边 ” 图 层 样 式 ， 如 图 3-143 所 示 。 























描 边 
结构 
大 小 (S): Ce | 像素 
位 置 p): 内 部 ~ 
混合 模式 (6): 正常 M 
不 透明 度 (O): D100 % 


填充 类 型 ): 颜色 ~ 
产 名 : 国 国 





| 设置 为 默认 值 | | 复位 为 默认 值 | 

















图 3-142 绘制 圆 角 移 形 图 3-143 添加 “ 描 边 ”图 层 样式 


[LO 继续 为 图 层 添 加 “内 阴影 ”“ 外 发 光 ” 和 “投影 ”图 层 样 式 ， 如 图 3-144 所 示 。 
wy 





















































内 阴影 投影 
结构 2 结构 
混合 模式 (E): 正常 ~ 
混合 模式 (6): 正常 ~ i 二 混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): 招 7 |% i 不 透明 度 (D): zy 100  % 
角度 (A): | 上 | 90 ” 度 回 使 用 全 局 光 (G) 5 图 角度 (A): (| 50 度 回 使 用 全 局 光 (G) 
距离 DO): 5 2 ”| 像素 图 素 距离 (D0): 6 0 像素 
阻塞 (0): < 0 % 方法 (Q): 柔和 ~ 扩展 (R): 4 0 % 
大 小 (5): 5 0 ”像素 扩展 P): 二 <_ 100 % 大 小 (3): 20 ”像素 
大 小 8): 一 一 3 ”像素 
品质 品质 
品质 
等 高 线 : | "| 了 ] 消除 锯齿 () 党 线 :| -| 回 注 全 邵 占 
等 高 线 : | -| | ] 消除 锯齿 们 ge 
“Eee % 加 本 
ed 范围 一 10 % 杂 色 (N): G 0 轩 
| 设置 为 默认 值 _| | 复位 为 默认 值 | 拌 动 0): G 0  % 回 图 层 控 空投 影 (U) 
ET ] [ 王 3 人 ] 设备 为 默认 值 | | 全 们 7 从 | 














图 3-144 继续 添加 图 层 样 式 
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LLA 确定 操作 后 的 效果 如 图 3-145 所 示 。 绘 制 矩 形 ， 创 建 剪 贴 蒙 版 ， 将 天 形 转换 为 
A A 
命令 ， 人 如 图 3-146 所 示 ， 


| 添 h0 杂 色 
确定] 
团 预 览 (P) 


多 下 i 








国 ”100% 


数 旺 (A): % 
Os 
分 布 
9 平均 分 布 (U) 
| 高 斯 分 布 (6) 


站 单 色 (M) 























图 3-146 添加 杂 色 
A 使 用 “ 圆 角 矩形 工具 ”绘制 辆 
角 和 矩形 ， 如 图 3-148 所 示 。 


图 3-145 确定 后 的 效果 
LI 天 按 Ctrl+F 组 合 键 再 次 添加 杂 色 ， 
是 | A 3-147 所 示 ， 





图 3-148 绘制 圆 角 和 矩 形 


图 3-147 确定 后 的 效果 


Or 为 图 层 添加 “和 斜面 和 浮雕 ”“ 内 阴影 ”“ 渐 变 营 加 ”图 层 样 式 ， 如 图 3-149 所 示 。 




































































Hi 内 阴影 渐变 到 加 
Ech | 结构 本 
样式 tT): 内 侧面 本 本 渐变 
方法 (Q): 平滑 ~ 混合 模式 (6): 正常 M4 
深度 D)， 七 100 % 不 透明 度 (o): 古 7 1% 温 合 模式 (0): 和 柔 光 v 凯 仿 色 
方向 : @@ 上 OF 下 下 9 
大 小 (2): G 0 像素 角度 (A): | * | 90 度 回 使 用 全 局 光 (G) 不 透明 度 (p): 8 oo 
次 tp 和 0 一 入 es 渐变 : ”zo 问 反 向 (R) 
a 距离 (D): 人 1 Es ry 
角度 区 一度 阻塞 (O: G 0 % 样式 (0): 续 性 Y ”Iv| 与 图 层 对 齐 人 0) 
。 ) 同 使 用 全 局 光 (G) 大 小 (S): G 0 “像素 = 
高 度 : 一 30 度 角度 (N): | 四 | 90 度 
3 入 :| -| 口 消 绿 锯 占 QD 品质 - 
ee } - 薄 放 全): 150  % 
高 光 模 式 H): 滤 色 等 高 线 : 门 消除 锯齿 人 
不 透明 度 (o): < 0 % 
人 杂 色 (N): 6 % - - 
EEC 设置 为 味 认 值 | [ 复位 为 默认 值 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
| 设置 为 默认 值 。」 | 复位 为 默认 值 | 








图 3-149 添加 图 层 样式 


R93 





半 光 六 YI 闫 午 且 国 汰 IN ddv 下 3 








完 OO EE 
WU A OE 





OS (ON 
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gp EI ID MT ns 





图 3-150 确定 后 的 效果 图 3-151 绘制 图 形 并 添加 图 层 样式 
70 添加 的 图 层 样 式 为 “颜色 王 加 ” “渐变 嫩 加 ”和 “投影 ”， 如 图 3-152 所 示 。 
































颜色 到 加 新 这 要 加 投影 
颜色 渐变 结构 
汪 、 混合 模式 (0): 柔 光 7 回 仿 色 pr 
温 人 模式 )， 颜色 - Em sg J 混合 模式 (6): 正常 ”El 
不 透明 度 (D): nD % 渐变 : [En [| 后 | 反 向 (R) 不 透明 度 (O): 5 60 oo 
yr = TT 样式 (): 线性 v” 团 与 图 层 对 齐 (D) RN 
| 设置 为 默认 值 | | 复位 为 默认 值 | 角度 (A): | 、， ) 120 ” 度 回 使 用 全 局 光 (G) 
角度 :| 上 1)90 度 ~ 
缩放 G): 一 7 一 一 100 % 距离 D): 5 1 像素 
: oo 
| 设置 为 默认 值 。| | 复位 为 默认 值 | 扩展 R): G = 
大 小 (5): (5 0 像素 











图 3-152 添加 的 图 层 样 式 


77 输入 文字 ， 并 为 文字 图 层 添 加 “投影 ”图 层 样 式 ， 如 图 3-153 所 示 。 确 定 操 作 
后 的 图 像 效 果 如 图 3-154 所 示 。 








二 下 | 
结构 0 Profile 
混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): 7 国 % 


前 度 (A): ( 傅 j 120 ” 度 加 使 用 全 局 光 () 


= 


距 高 和): 本 1 像素 








扩展 (R): :3 | % 
大 小 (5): te 一 一 一 = 1] 像素 
图 3-153 添加 “投影 ”图 层 样式 图 3-154 确定 后 的 效果 


172 用 同样 的 方法 ， 绘 制图 形 ， 并 输入 文字 ， 如 图 3-155 所 示 。 继 续 添 加 文字 ， 完 
em 成 制作， 如 图 3-156 所 示 。 


》 Proflle 》 Proflle 


>< 国 WEESTe 


.0 Settings 村 Settings 


() Log out (|) Log out 





图 3-155 绘制 图 形 并 输入 文字 图 3-156 完成 制作 
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图 标的 设计 


.2 图 标 按 造型 分 类 可 以 分 为 局 平 化 图 标 、 线 性 图 标 、 立 体 图 标 3 
| 类 。 从 局 平 化 图 标 中 可 以 细 分 出 常规 局 平 化 、 长 投影 、 投 影 式 和 渐 
变 式 4 种 。 从 立体 图 标 中 可 以 细 分 出 立体 图 标 和 写实 图 标 。 


CE 局 平 化 国标 设计 


局 平 化 是 最 近 几 年 流行 的 风格 ， 我 们 在 各 种 APP 中 见 到 的 局 平 化 风格 很 多 。 
下 面 对 4 种 局 平 化 风格 图 标的 绘制 进行 讲解 ， 分 别 是 常规 忆 平 化 、 长 投影 、 投 影 式 
渐变 式 ， 如 图 3-157 所 示 。 


图 3-157 4 种 扁平 化 风格 图 标 








《 罗 常 规 扁平 化 
常规 扁平 化 图 标 是 没有 任何 修饰 的 扁平 化 图 标 ， 绘 制 过 程 十 分 简单 。 


由 /设计 思路 





本 实例 绘制 的 是 常规 局 平 化 图 标 ， 直 接 使 用 “ 圆 角 和 矩 形 工 具 ”“ 椭 圆 工 具 ” 和 “ 自 定 
形状 工具 ”绘制 图 形 即 可 。 制 作 流 程 如 图 3-158 所 示 。 





3-158 制作 流程 
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半 沙 济 半 I 闫 强 刁 国 汝 I ddv  @@3 > 














Photoshop 热门 铺 PP 类 型 设计 从 入门 到 精通 





制作 步 又 


知识 点 “ 圆 角 矩形 工具 ” “ 栖 圆 工具 ” “ 自 定 形状 工具 ” 
光盘 路 径 第 3 章 \3.2.1 局 平 化 图 标 设 计 、\1. 常规 扁平 化 


0 7 执行 “文件 " 儿 新建? 命令 ,新 建 空 自 文 档 , 妈 图 3-159 所 示 , 选择 “ 圆 角 矩形 工具 ”， 







































































在 选项 栏 中 设置 填充 颜色 ， 并 设置 圆 角 半径 为 40 像素 ， 如 图 3-160 所 示 。 


















































































| 新建 
名 称 (N): 未 标题 -1 
预 设 (P): 自 定 > 
1D) 
宽度 (W): 500 像素 加 昨 除 预 设 (D).. 
高 度 (H): 400 像素 加 
分 辨 率 (R): 72 像素 /英寸 “~ 
颜色 模式 (M): RGB 颜色 vv 8 位 Y 
背景 内 容 (C): 白色 Y 图 像 大 小 : | | . | 
PSs 文件 (F) 编辑 {图像 四 ”图 层 (L) 类 型 (Y) 选择 (9 污 流 四 ”视图 窗口 (W) 帮助 (H) 
人 A 高 级 Ee i@- :国粹 : 六 ”二 Jw [0 要 | 9 Ht 天 | 日 尼 培 | 大 | 闪 : [ox 
颜色 配置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... ~ ee 
像素 长 宽 比 (X): 方形 像素 了 








图 3-159 新 建 空 白文 档 图 3-160 选项 栏 中 的 参数 设置 
0 单 击 “半径 ” 左 侧 的 “设置 ”按钮 ,在 展开 的 面板 中 选择 “固定 大 小 ” 单 选 按钮 ， 
一 = 设置 宽 、 高 为 256 像 素 , 如 图 3-161 所 示 。 在 画面 中 绘制 圆 角 和 珑 形 , 如 图 3-162 所 示 。 


日 尼 区 | 次 | 半径 : | 和 0 像 旭 [Vi 对 让 
中 不 爱 约 上 束 Wu 
DD A 

局 回放 大 小 W: |256 像 素 | HH: 
OF Ww H; 

| 内 中 心 





图 3-161 设置 固定 大 小 图 3-162 绘制 圆 角 算 形 
A) 选择 “椭圆 工具 ”， 设 置 “ 固 0 在 画面 中 绘制 正 圆 ， 如 图 
WO 定 大 小 ”为 186 像 素 ， 如 图 人 ga | 
Su a a 


口 T 强 约束 

口 圆 ( 绽 制 直径 或 半径 ) 

加 四 宇 大 小 Wi H: 
OF Nw H 

由 由 中 心 





图 3-163 设置 固定 大 小 图 3-164 绘制 正 贺 
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O05 大 选择 两 个 图 层 ， 并 选择 “移动 工具 ”后 ， 在 选项 栏 中 单 击 “ 重 直 居中 对 齐 ”# 
S| 钮 和 “水 平 居中 对 齐 ” 按 钮 ， 如 图 js 
AAA 使 用 “路 径 选 择 工 具 ” 选 择 圆 ， 按 Ctrl+(C 组 合 键 复制 ， 按 Ctr1l+V 组 合 键 粘 贴 。 
按 Ctrl+T 组 合 键 进行 自由 变换 ， 按 住 Shift+Alt 组 合 键 按 比例 缩小 40 像素 ， 
Ba a 


PS 文件 [F) 编辑 日 ”图 像 四 ”图 层 (L) 类 型 (Y) 选择 (可 ” 注 第 由 ”视图 IV) 音 





3-165 单 击 对 齐 按钮 3-166 复制 并 缩小 


0 “在 “属性 ”面板 中 可 以 进行 细致 调整 ,调整 后 的 参数 为 146 像 素 , 如 图 3-167 所 示 。 
在 选项 栏 中 选择 “ 减 去 顶层 形状 ”选项 ， 如 图 3-168 所 示 。 


























> 
属性 忆 
回回 苑 机 状 属性 
面 
二 
见 
= 
nH :|[E€ 不 设 
计 
吕 | 面 | 面 
图 3-167 调整 参数 图 3-168 选择 “ 减 去 顶层 形状 ”选项 
CO 〇 执行 操作 后 的 图 形 如 图 3-169 O09 在 工具 箱 中 选择 “ 自 定形 状 工 
所 示 。 WA 具 ”， 如 图 3-170 所 示 。， 








国 柜 形 工 县 
国 图 角 拒 形 工 





图 3-169 确定 操作 后 的 图 形 图 3-170 选择 “ 自 定 形状 工具 ” 


OX 








更 哆 ZU Photoshop 热门 人 MpP 类 型 设计 从 入 门 到 精通 
更 竺 BU 





A 在 选项 栏 中 单 击 如 图 3-171 所 HA 展开 列表 框 ， 单 击 如 图 3-172 
/ 示 的 下 拉 按 钮 。 / 1 所 示 的 图 标 。 


' 侣 | 浆 ， 到 :| 和 日 品 7 六 in 









































TICCT | 
了 一 全 吵 本 LI | "类 YA 区 
EA Vy eT 
仅 文本 
和 中 ‘a sa 此 w 小 给 览 图 
VvV 人 OO . Gp 六 编 览 图 
类 党 OL ]@© 美 闸口 © |， 
® TM TM 友 列 表 
载 和 形状 .… 





图 3-172 单 击 图 标 


12 DOD ei 
ee_=0 3-173 所 示 。 在 弹出 的 对 话 框 
中 单 击 “ 确 定 ” 按 钮 ， 如 图 3-174 所 示 。 





本 Photoshop 
\ 是 天 用 形状 中 的 形状 着 换 当前 的 形状 ? 








确定 八 | | 取消 追加 (A) 





图 3-173 选择 “全 部 ”选项 图 3-174 单 击 “ 确 定 ” 按 钮 
7 I) 在 载 入 的 形状 中 选择 “标志 3”， 如 图 3-175 所 示 。 在 画面 中 按 住 Shift 键 绘 
制 三 角形 ， 如 图 3-176 所 示 。 


WN: [186 俐 | ea H: [185 倒 | 日 屁 塌 | 闲 .和 :| 全 目 忆 对 ia 


-dAaad/ MO > 


> 转 下 玉 Cer 人、 
= dT Ls -D0 DO 
CD O0D¥O) Hy 


Ey et 
申 类 革 记 尖 记 堵 吉 米 者 米 WVWwyt】) 
和 一 一 28 十 音 味 让、 疏 八 八 仆 全 次 下 本 六 这 
名 业主 到 名 < 二 | “sz me = 一 国 国 
汪 放 二 采 国武 生 时 各 中 强 市 忆 世 可 一 茶 迷 全 
富 得 口 间 疙 合 O 员 罗 作 信人 Ow 阐 吕 








和 国名 时 二 下 二 攻 唱 目 一 -© i J $3 
5 SENSEEEESOORSSESSG 
cr 人 3 mm Ci iT 站 - 





图 3-175 选择 “标志 3” 3-176 绘制 三 角形 
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7 按 Ctrl+T 组 合 键 将 其 逆 时 针 旋 转 90" 。 然 后 从 标尺 中 拖 出 参考 线 ， 标 记 圆 的 
中 心 ， 精 确 调整 三 角形 的 位 置 ， 如 图 3-177 所 示 。 按 Ctrl+; 组 合 键 隐藏 参考 线 ， 
完成 的 效果 如 图 3-178 所 示 。 





图 3-177 旋转 并 调整 位 置 图 3-178 完成 效果 


© 
提示 : 选择 贺 后 ， 按 
Ctrl+T 组 合 键 即 可 看 到 中 心 
点 ， 然 后 抱 出 参考 线 即 可 ， 
如 图 3 一 179 所 示 。 


| READIMORE | 








半 沙 济 H 闫 强 刁 国 泊 I ddv C=> 


图 3-179 中 心 点 
加 长 投影 
随 着 局 平 化 被 演绎 得 如 火 如 茶 ， 长 投影 风格 也 很 快 加 入 到 这 个 行列 中 。 长 投影 是 指 在 
单 规 局 平 化 图 标 上 添加 的 一 个 很 长 的 投影 效果 。 
如 /设计 思路 


制作 本 实例 的 长 投影 图 标 ， 首 先 要 绘制 矩形 ， 将 和 矩形 旋转 后 添加 锚 点 ， 拖 动 锚 点 来 确 
定 阴 影 的 学 围 ， 调 整 图 层 的 不 透明 虔 实 现 阴影 效果 ， 如 图 3-180 所 示 为 制作 流程 。 


DPC [DC) 


3-180 制作 流程 
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更 先 gUl 





Photoshop 热门 姜 PP 类 型 设计 从 入 门 到 精通 








二 /制作 步骤 





知识 点 妇 顺 序 、 图 层 蒙 版 、 添 加 锚 点 、 图 层 
光盘 路 径 第 3 章 \3.2.1 扁平 化 图 标 设计 \2. 长 投影 























图 层 顺 序 、 图 层 蒙 版 、 添 加 锚 点 、 图 层 不 透明 度 














0 
充 诺 色 为 黑色 的 答 形 ， 如 图 


pl a 





图 3-181 绘制 矩形 


ZJ 按 Ctrl+T 组合 键 ， 然 后 按 住 


O05 Shift 键 将 符 形 顺 时 针 旋 转 


435° 





G0) 
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| Bl 8 3 


图 3-183 旋转 45 度 
选择 “ 圆 角 短 形 1” 图 层 ， 按 住 
Ctrl 键 单 击 该 图 层 的 缩 览 图 ， 将 
其 载 入 选区 ， 如 图 3-185 所 示 。 
A 按 Ctrl+Shift+I 组 合 键 进 
选择 ， 如 图 3-186 所 示 。 


行 反 向 


在 “图 层 ” 面 板 中 调整 矩形 
图 层 到 椭圆 图 层 的 下 方 ， 如 


()2 








Ee a 
| 图 屋 | -三 
P 类 型 ?| 回力 工 互 国 
LE 党 齐 : |100% | " | 
锁定 : 图 sf 中 四 填充 :|1o0%| -| 


@@ | 三 天 1 

© Ln 贿 圆 1 
?EN 1 

回 角 拒 形 1 

地 | | 如 时 各 | 


图 3-182 调整 图 层 顺 序 
人 
加 图 层 蒙 版 ”按钮 ， 添 加 图 层 
蒙 版 ， 如 图 3-184 所 示 。 


ee 


四 





| 正常 | 赴 透 明度 : |100% | ”| 


斌 E: 回 7 中国 填充: [100%| | 





3-184 添加 图 层 蒙 版 


@ 
提示 。 选择 图 层 后 ， 
直接 上 下 抑 动 即 可 
调整 图 层 顺 序 。 


| READIMORE | 








图 3-185 载 入 选区 图 3-186 方向 选择 


O07 设置 背景 色 为 黑色 ,选择 “矩形 1” 图 层 蒙 版 ， 按 Ctrl1+Delete 组 合 键 填充 蒙 版 ， 
如 图 3-187 所 示 。 使 用 “钢笔 工具 ” 单 击 以 添加 锚 点 ， 如 图 3-188 所 示 。 




















| EE 
计 定 : 加 。 中 上 。 填 训 :|100%| ”| : 
ee 

® | 奋 形 状 1 c 
界 

© 以 加 1 面 
加 

号 

见 

5 

素 

设 

证 

六 
图 3-187 填充 蒙 版 图 3-188 添加 锚 点 


CO 按 住 Alt 键 依 次 单 击 矩 形 顶 端的 3 个 锚 点 ， 如 图 3-189 所 示 。 然 后 按 Ctrl 键 拖 
动 锚 点 的 位 置 ， 使 多 余 的 黑色 部 分 收 到 三 角形 下 方 ， 如 图 3-190 所 示 。 





3-189 单 击 锚 点 3-190 拖 动 锚 点 位 置 








更 哆 ZU Photoshop 热门 命 PP 类 型 设计 从 入 门 到 精通 
CF 





EI oe 
WA 的 “不 透明 度 ” 为 20%， 如 图 
SoM ya 













® | 1 
二 部 椭圆 1 
© EE ,| 拒 形 1 

@ | 坪 - 加 向 拒 形 1 


6 回春 向 国 曾 





图 3-191 修改 不 透明 度 
77 下 面 是 圆 形 的 长 投影 制作 。 同 
理 儿 也 给 制 册 全 移 形 咱 病 人 
完 的 角度 ， 如 图 3-193 所 示 ， 





图 3-193 绘制 矩形 并 旋转 





调整 完成 后 第 一 个 长 投影 就 制 
作 完 成 了 ， 如 图 3-192 所 示 。 





图 3-192 长 投影 完成 效果 


添加 蒙 版 后 ， 使 用 “钢笔 工具 ” 


一 添加 3 个 锚 点 , 然后 调整 锚 点 ， 
如 图 3-194 所 示 。 


图 3-194 添加 并 调整 锚 点 


7 ZL] 调整 图 层 的 “不 透明 度 ” 为 20%， 完 成 长 投影 图 标的 绘制 ， 如 图 3-195 所 示 。 
wy 





图 3-195 完成 绘制 
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@ 
提示 也 可 以 在 选择 
蒙 版 后 ， 直 接 使 用 “ 画 
笔 工 具 ” 在 画面 中 涂抹 。 





| READIMORE | 





几 旺 
图 投影 


及 影 是 指 在 稼 规 局 平 化 的 基础 上 添加 的 一 个 效果 。 


sa 设计 思路 





本 实例 通过 对 党 规 局 平 化 图 标 设置 “投影 ”图 层 样式 ， 


3-196 所 示 。 





图 3-196 制作 流程 


ET 


实现 投影 效果 ， 制 作 流 程 如 




















知识 点 “投影 ”图 层 样式 、 复 制 与 粘贴 图 层 样 式 
光盘 路 径 第 3 章 \3.2.1 扁平 化 图 标 设计 \3. 投影 


LT7 A 常规 扁平 化 的 基础 上 , 选择“ 圆 角 和 矩形 1” 图 层 ， 单 击 “ 图 层 ” 面 板 底部 的 “ 添 
命令 ， 如 图 3-197 所 示 。 打 开 “ 图 


加 图 层 样式 * 按钮 ， 在 打开 菜单 中 选择 “投影 


层 样 式 ” Wn 设置 “投影 ”参数 ， 如 图 3-198 所 示 。 




















图 层 样 式 
样式 
混合 选项 器 认 
口 斜面 和 浮雕 

















图 3-197 选择 “投影 ”命令 


投影 
混合 模式 (6): 正片 县 底 ~ 国 国 
不 透明 度 (0): 一” 20 % 
角度 (A): ( 120 ” 度 回 使 有 全 局 光 (G) 
距离 {OD): 5 | 10 像素 
扩展 R: C= 二 0  % 
大 小 (9): C= 一 = 0 像 喜 





多 -| 口 ] 消除 锯齿 () 
杂 色 (N): G 0 % 


周 图 层 挖 空 投影 (J) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 








图 3-198 设置 “投影 ”参数 


新 建 样式 (W)… 


预览 (V) 





加 





ke 








六 沙 痢 I 闫 指 卫 国 3 ddv 全 9 











Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 


0 言 击 “确定 ”按钮 图像 效果 和 如 图 3 199 所 示 。 选 返 该 图 层 ， 剃 击 鼠 标 右键 
一 选择 “拷贝 图 层 样式 ”命令 ， 如 图 3-200 所 示 ， 


拷贝 图 层 样式 
粘贴 图 屋 相 4 
清除 图 层 样 式 
复制 形状 尾 性 





图 3-199 图 像 效 果 图 3-200 选择 “拷贝 图 层 样式 ”命令 


VI) 选择 圆 和 三 角形 所 在 的 图 层 ， 单 击 和 鼠标 右键 ， 选 择 “ 粘 贴图 层 样 式 ” 人 命令， 如 
w 图 3-201 所 示 。 完成 制作 ， 效 果 如 图 3-202 所 示 。 
接见 图 层 样式 


粘贴 图 层 样 式 并 
清除 图 后 样式 


复制 形状 尾 性 
精 贴 形状 虱 性 





从 陋 高 图 层 冬 放 


侣 并 形状 
合并 可 见 图 层 





图 3-201 执行 “粘贴 图 层 样式 ”命令 图 3-202 完成 效果 
国 浙 变 式 
渐变 式 是 在 弟 规 局 平 化 的 基础 上 实现 浙 变 的 效果 ， 类 似 于 一 种 折纸 的 感 玩 。 


< 


Pe 设 讨 思 路 





本 实例 通过 添加 与 删除 销 点 ， 以 及 添加 “渐变 到 加 ”图 层 样式 来 实现 渐变 的 效果 ， 制 
作 流 程 如 图 3-203 所 示 。 





@'D'O 


图 3-203 制作 流程 





114 












一 每 


ET 









































“渐变 到 加 ”图 层 样 式 











知识 点 EE 
光盘 路 径 第 3 章 \3.2.1 扁平 化 图 标 设计 \4. 渐变 式 


0 7 在 常规 扁平 化 的 基础 上 ， 复 制 圆 角 矩形， 并 在 “图 层 ” 面 板 上 设置 “填充 ”为 
0%， 如 图 3-204 所 示 。 选 择 “ 钢 笔 工 具 ”， 在 圆 的 路 径 左 右 两 侧 添 加 两 个 锚 点 ， 








| 正常 *| 不肖 明度 : |100% | | 









诬 主 : 回 中 下 
Fe [和 
| J | 

各 Es 马 图 前 失利 En z 全 

加 | 后 形 : r= 

效果 
二 把 影 
© FE 炳 加 1 fe < 
效果 
归 欣 影 


图 3-204 设置 “填充 ”为 0% 
LA 在 工具 箱 中 选择 “直接 选择 工 
em 具 ”， 如 图 3-206 所 示 。 


从 路 径 选 择 工 具 A 
。 上 直接 选择 工具 A 
酸 1 村 


人 





图 3-206 选择 “直接 选择 工具 ” 











图 3-205 添加 两 个 销 点 


让 框 选 下 半 部 分 ， 如 图 3-207 
所 示 。 


ns Eh 








图 3-207 框 选 下 半 部 分 


pd 按 Delete 删除 选中 的 锚 点 ， 如 图 3-208 所 示 。 双 击 图 层 ， 在 打开 的 对 话 框 中 添 
加 “渐变 登 加 ”图 层 样 式 ， 如 图 3-209 所 示 。 





图 3-208 删除 锚 点 








渐变 





新 建 样式 (W)..… 


六 预览 (V) 

















口 描 边 样式 (0): 线性 ~ 回 与 图 层 对 齐 人 
口内 阴影 角度 WW: (| ) 8 度 
回 内 发 光 一 


缩放 人): Ze 100 % 





颜色 到 加 [ 没 生 为 默认 值 “] [[ 夏 位 为 默认 值 ] 











图 3-209 添加 “渐变 一 加 ”图 层 样式 


ls 








Photoshop 热门 Opp 类 型 设计 从 入 门 到 精通 
更 鱼 gU 





0 大 单 击 “确定 ”按钮 ， 效 果 如 图 3-210 所 示 。 选 择 底 层 的 圆 角 和 矩形， 同样 添加 “ 渐 
S, i 





























笠 未 渐变 晋 加 
混合 运 贡 时 认 ce 
ee 混合 模式 (o): 正片 秋 底 
和 语 线 不 透明 度 (P): “七 
纹理 
指 边 样式 0): 线性 ~ 回 与 图 层 对 齐 人 
门 表 影 角度 N): ( 上 ) 90 度 
内 发 光 - 
光泽 缩放 人 ): = 10  % 
颜色 私 加 [_ 设置 为 默认 值 |】 | 揽 位 为 默认 值 | 
渐变 要 加 
图 案 秋 加 
外 发 光 
投影 
图 3-210 图 像 效 果 图 3-211 添加 “渐变 便 加 ”图 层 样 式 


LO 单 击 “ 确 定 ” 按 钮 完成 制作 ， 效 果 如 图 3-212 所 示 。 





图 3-212 完成 效果 


QI 亚 吧 线性 图 标 设计 


线性 图 标 一 般 作 为 APP 界面 中 的 功能 性 或 示意 性 图 标 ， 如 图 3-213 所 示 。 它 比拟 物 
化 图 标 简单 很 多 ， 但 却 很 实用 ， 特 别 适 用 于 局 平 化 设计 。 





VAE GIVE 


TO SOHO 


Settings 
Notifications 
Sync 

User Guide 


Store 


Expression 





3-213 线性 图 标 
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Bb, 一 般 线 条 为 2 像素， 如 图 3-214 所 示 ， 也 有 的 加 强 为 3 像素 的 ， 如 
图 3-215 所 示 。 
VY 线条 简单 ， 图 形 指示 意义 明确 。 





3-215 3 像素 线性 图 标 


线性 图 标 主 要 有 两 种 绘制 方法 ， 下 面 分 别 进 行 介绍 。 
形状 绘制 法 
会 制 法 就 是 直接 使 用 绘图 工具 绘制 图 标 。 


BEET 


使 用 绘图 工具 绘制 形状 ， 设 置 描 边 颜色 和 宽度 参数 ， 而 不 设置 填充 色 ， 即 可 绘制 出 线 
性 图 标 。 制 lin 色 3-216 所 示 。 





Ca 











图 3-216 制作 流程 


更 赞 2 | 天 | 到 iotoshop 热 | Opp «ks 类 型 肌 计 从 入 1 到 精 
i 锻 gpU f 





ET 


知 识 点 6 圆 角 和 扎 聊 本 怖 ” “用 9 研 先 择 工 具 ” “4 网 全 网 
光盘 路 径 第 3 章 \3.2.2 线性 图 标 设计 \1. 形状 绘制 法 


07 选择 “ 圆 角 和 矩形 工具 ”， 在 选项 栏 中 设置 “填充 ” 
/ HI a | 2 a ea 2 a 
布 中 绘制 圆 角 和 矩形 ， 如 图 3-218 所 示 。 


































































































TE 














Ps 文件 (F) 编 筷 (图 像 四 ”图 层 届 类 型 (VY) 














国 | | 形 屿 ”|| 壤 襄 :|| 摘 训 :| 一, |2 点 SS 





图 3-217 设置 “ 描 边 ” 与 “填充 ” 3-218 绘制 圆 角 和 珑 形 
0 按 Ctrl+] 组 合 键 复制 图 层 ， 并 调整 图 形 的 位 置 ， 如 图 3-219 所 示 。 使 用 “路 径 
= 一， 选择 工具 ”， 框 选 左下 角 的 4 个 锚 点 ， 按 Delete 键 删 除 ， 如 图 3-220 所 示 。 使 
“椭圆 工具 ”绘制 正 圆 ， 如 图 3-221 所 示 。 





3-219 复制 并 调整 图 形 位 置 3-220 删除 锚 点 3-221 绘制 正 圆 


LI 选择 “钢笔 工具 ”， 在 选项 栏 设 置 相关 参数 ， 
&] 如 图 3-222 所 示 。 在 画布 中 绘制 图 形 ， 如 图 
34223 所 示 | 


PS 文件 ”编辑 {日 ” 图 像 四 ”图 层 (L) 类 型 (Y) 选择 (9 





未 标题 -2.psd @ 285% ( 圆 角 矩形 1 RGB/8)* x* 
































3-222 设置 参数 3-223 绘制 图 形 
Ps 文件 编 徊 昌 ” 图 你 四 ”图 层 山 ”类型 N) 选择 (9 滞 第 四 视 [2 点 ~ | 居于 || w: [149 像 | Ge 
从 -| 填充 :| 一 | 撒 坟 :| 一 .| |2 点 7 || 一 一 | W: 1349 去 1 中 上 搞 为 选项 类 - 国 
加 一 co ;由 @ 和 = ee 撕 思 选项 次 - 国 | i 
提示 。 使 用 “路 径 选 择 工具 ” 选 未 标题 -2 psd @ 285% ( 国 角 页 闻 
择 图 形 ， 在 选项 栏 中 单 击 “ 设 置 形 | 
状 描 边 类 型 ”按钮 ， 在 展开 的 列表 四 RES | | 
中 设置 “视点 ” 为 “ 圆 形 ” | 如 图 > 
3 一 224 所 示 。 设 置 “ 角 点 ”为 “ 国 学。 
沂 示 。 设置 “ 朋 为 圆 A a x 挤占 : 角 占 
形 ”， 如 图 3 一 225 所 示 。 -> H un |€ :| 人 
READIMGORE -/ 更 多 选 页 ~ wei| 
了 EN 
3-224 设置 端点 3-225 设置 角 点 
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国 路径 操 作法 
下 面 介绍 路 径 操 作法 。 为 了 方便 读者 阅读 ， 这 里 将 原 2 像素 宽 的 线性 图 标 放 大 绘制 。 


uv 设 及 计 思 路 





本 实例 通过 绘制 图 形 ， 并 对 图 形 设置 “路 径 操 作 ”方式 ， 完 成 图 标的 绘制 ， 制 作 流 程 
如 图 3-226 所 示 。 








图 3-226 制作 流程 


路 径 操作 、 路 径 对 章 方式 
第 3 章 \3.2.2 线性 图 标 设计 \2. 路 径 操 作法 














0 A 绘制 一 个 圆 角 和 矩形， 如 图 3-227 所 示 。 按 Ctrl+C 组 合 键 复制 圆 角 短 形 ， 按 

/ Ctrl+V 组 合 键 进行 粘贴 ， 然 后 将 复制 的 给 形 缩小 ， 如 图 3-228 所 示 。 

0 罗 选择 “路 径 选 择 工具 ”， 在 选项 栏 中 单 击 “路 径 操 作 ” 按 钮 ， 在 展开 的 列表 中 
em 选择 “ 减 去 顶层 形状 ”选项 ， 如 图 3-229 所 示 。 





国 | 尼 二 ”Vi 对 ff 边 

















名 癌 并 形状 组 忻 
3-227 绘制 圆 角 算 形 图 3-228 复制 并 缩小 圆 角 和 矩形 图 3-229 选择 “ 减 去 项 层 形状 ”选项 
() 7 操作 后 形成 了 外 框 ， 如 图 3-230 所 示 。 使 用 “矩形 工具 ”在 上 方 绘制 矩形 ， 在 
UO wp om 再 次 绘制 矩形 ， 


在 选项 栏 中 选择 “合并 形状 ”选项 ， 如 图 3-232 所 示 ， 


JS 





半 沙 济 H 闫 强 刁 国 泊 I ddv C=> 








加 尼 ;车 | 区? 拧 边 
区 新 建 图 层 1 
w 里 合并 形状 
局] 减 去 顶层 形状 
同 与 形状 区 域 相交 
吊 排除 重叠 形状 


网 合并 形状 组 件 





3-230 形成 外 框 图 3-231 绘制 矩形 效果 3-232 选择 “合并 形状 ”选项 
此 时 的 图 像 效 果 如 图 3-233 所 示 。 和 选择 所 有 形状 ， 在 选项 栏 中 单 击 “ 路 径 对 齐 
方式 ”按钮 ， 在 下 拉 列 表 中 选择 “水 平 居中 ”选项 ， 如 图 3-234 所 示 。 


图 ,她 [ 史 对 过 用 





面 顶 边 人) 
由 0 委 直 居中 (V) 
了 底 边 (B) 


由 按 宽度 均匀 分 布 


癌 接 高 度 均 与 分 布 


w 对齐 到 选 区 





对 尘 冯 画布 
3-233 图 像 效 果 3-234 水 平 居中 
使 用 “ 圆 角 矩形 工具 ”绘制 贺 将 其 进行 对 齐 操 作 ， 如 图 
角 和 矩形 ， 如 图 3-235 所 示 。 3-236 所 示 。 








3-235 绘制 圆 角 和 珑 形 3-236 对 齐 


OF 绘制 一 个 圆 角 矩形, 然后 在 选项 栏 中 选择 “ 减 去 顶层 形状 ”选项 , 如 图 3-237 所 示 。 
在 下 方 绘制 一 个 矩形， 选择 “ 减 去 顶层 形状 ”选项 ， 效 果 如 图 3-238 所 示 。 





号 ] 
则 ] 与 形状 区 域 相交 区 
虽 排除 重合 形状 
铝 音 并 形状 组 忻 
3-237 减 去 顶层 形状 3-238 减 去 顶层 形状 的 效果 
O08 绘制 矩形 ， 并 复制 两 个 ， 选 择 3 个 和 矩形， 设置 对 齐 方式 为 “ 重 直 居中 ”， 如 


3-239 所 示 。 将 矩形 移动 到 合适 的 位 置 ， 完 成 绘制 ， 如 图 3-240 所 示 。 


BB + 多 [Vi 对 济 边 红 
尼 左边 (L) 
昌 水 平 居 中 (H) 
哩 | 右边 (R) 
本 顶 边 (T) 
有 底 边 (B) 


由 按 帘 度 均 匀 分 布 
总 - 按 高 度 均匀 分 布 








v 对 齐 到 选区 
对 齐 到 画布 





3-239 绘制 矩形 并 “垂直 居中 ”对 齐 3-240 完成 绘制 


O09 用 同样 的 方法 可 以 绘制 其 他 线性 图 标 ， 如 图 3-241 所 示 。 





3-241 绘制 其 他 线性 图 标 | 


立体 图 标 不 同 于 扁平 化 和 线性 图 标 。 立 体 图 标的 绘制 更 为 复杂 ， 一 般 作 为 APP 的 应 
用 图 标 。 








Photoshop 热门 DpPp* A 


J] 到 精通 








站 /设计 思路 


和 el 


大 感 9 


调整 实现 相机 竟 头 的 层次 





“制作 步骤 


制作 流程 如 图 3-242 所 示 。 


国 * 图 : 


图 3-242 制作 流程 


过 图 层 样 式 实 现 相 机 的 立体 效果 , 通过 图 形 的 复制 、 


Ww 
































“ 圆 角 矩形 工具 ”“ 椭 区 














和” 、 图 层 样式 


=、 

















A 
光盘 路 径 
O07 


图 | 中 村 交合 


第 3 章 \3.2.3 立体 图 标 设计 


新 建文 档 ， 为 背景 图 层 填充 渐变 色 。 使 用 “ 圆 角 和 矩形 工具 ” 


绘制 圆 角 矩形， 如 


O02 将 图 层 重合 名 为 cm en 六 图 层 W Du “斜面 和 浮 膨 ” “内 阴影?” 图 | 左 丰 EN 


如 图 3-244 所 示 。 





图 3-243 绘制 圆 角 矩形 


(Qo 继续 为 图 技 添 加 “内 发 光 ”“ 光 泽 ” 和 “渐变 生 加 ”图 层 样式 ， 如 图 3-245 所 示 。 























oe 
混合 模式 (6): 正常 ~ 
不 透明 度 (D): 世 100 % 
隶 色 (: G 0 % 
ea 图 
图 素 
方法 (Q): 杀 和 
源 :人 居中 介 图 边 如 (6) 
阻塞 (0): 4 0 % 
大 小 (5): 全 3 像素 
品质 
等 高 线 : | ”| 站 | 消 际 锯齿 () 
范围 R): ZS 50 % 
拌 动 (]): 5 0 % 
| 设置 为 默认 值 _| | 复位 为 默认 值 | 
































斜面 和 浮雕 
结构 
样式 (1D): 内 斜面 
方法 (Q): 平滑 MM 
深度 (D): 全 460  % 
方向 : 人 上 ”图 下 
大 小 C): 5 18 ”像素 
软化 (F): Dy 16 像素 
阴影 
角度 (N): 5 90 度 
* 上 回 使 用 全 局 光 (G) 
高 度 一 37 度 
光泽 等 高 线 : -| 辣 消 除 锯齿 QD 
高 光 模 式 (H): 正常 ~ 国 国 
不 透明 度 (D): 32 oe 
阴影 模式 (A): 正常 ~ 国 国 
不 透明 度 (C): 人 100  % 
|_ 设置 为 默认 值 | | 复位 为 默认 值 | 














内 阴影 

结构 

混合 模式 (6): 正常 
不 透明 度 (0): sz 100  % 


~ 国 国 


前 度 (A): | 。 | -30 ” 度 回 使 用 全 局 光 (G) 


中 高 D): 人 1 像素 
阻塞 (0): 一 二 a 27 % 
大 小 :一 Ze 59 像素 


品质 
等 高 绪 ; - 消除 锯齿 (L) 
杂 色 全): [全 ] 0 596 





| _ 设置 为 默认 值 | | 复位 为 默认 值 











3-244 添加 图 层 样式 


结构 


混合 模式 (6): 绪 性 减 浅 【添加 
不 透明 度 (0): 9 30 % 


角度 (N): | %* | 90 度 


距离 (0): OO 34 像素 
大 小 (5): 一 = 250 像素 


等 高 线 : | J 消除 锯齿 人) 


中 尽 相 们 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
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3-245 继续 添加 图 层 样式 











渐变 琶 加 
渐变 
混合 模式 (0O): 正常 Md 仿 色 
不 透明 度 (P): 100  % 


新 变 : ED 反 向 (8) 





样式 (0D): 线性 加 与 图 层 对 齐 人 如 
角度 (N): | 4 |) 90 度 
缩放 (S): - 100 % 








[设置 为 默认 值 | | 复位 为 默认 值 | 











0 J 确定 操作 后 的 图 像 效 果 如 图 3-246 所 示 。 复 制图 层 ， 将 图 层 重 命名 为 “发 光 ”， 


选择 前 面 ea 拖 入 组 内 。 





除 图 层 样 式 , 为 其 添加 “内 发 光 ” 图 层 样 式 , 如 图 3-247 所 示 。 创建 新 组 “ 底 ”， 


图 3-246 图 像 效果 


LO 新 建 图 层 ， 使 用 “画笔 工具 

S Wal Wi 习作 | Nal 如 图 3-248 所 示 。 

LO 新 建 图 层 ， 工具 ”涂抹 ， 设 置 图 层 的 “不 透明 度 
如 中 大 本 并 创建 组 ， 为 组 添加 蒙 版 ， 填 充 黑 色 ， 按 住 Ctrl 键 单 击 矩 形 图 

填充 白色 。 使 用 “椭圆 工具 ” 


层 的 缩 览 图 ， 





续 使 用 “画笔 


回 到 蒙 版 中 ， 


图 3-248 涂抹 高 光 








内 发 光 
混合 模式 (6)， 源 色 了 
不 通明 度 (o): D100 

杂 色 M: 6 0 
a 图 oO 
图 素 

















方法 oj: 柔和 ~ 

源 : 口 居 中 全 。 @ 边 综 (6) 
阻塞 (O: G lo % 
大 小 (5): 5 24 像素 

品质 

等 高 线 :| -| 口 淹 $ 占 (0 
范围 R): ZS 50  % 
拉动 0): 6 0 % 








| 设置 为 默认 值 _| | 复位 为 默认 值 | 














图 3-247 添加 “内 发 光 ” 图 层 样式 


画笔 工具 ”在 矩形 上 涂抹 高 光 , 设置 图 层 的 “混合 模式 ”为 “ 登 


0 “7 设置 图 层 的 “填充 ”为 0%， 
为 图 层 添 加 “外 发 光 ” 图 层 
样式 ， 如 图 3-250 所 示 。 


Wt Se 

















; 吡 言 模式 个): 正常 ™ 
不 重 有 明度 中) 33 % 

玉 色 和): 本 = 史 
© | | 


























| 图 素 





方法 四) 


柔和 ~ 
扩展 EP}: 一 33  % 
大 小国 :> 43 像素 


























图 3-250 添加 “外 发 光 ” 图 层 样式 








绘制 正 圆 ， 





图 3-249 绘制 正 圆 


人 〇 9 单 击 “确定 ”按钮 后 
CC 效果 如 图 3-251 所 示 ， 


图 3-251 图 像 效果 


度 ” 为 20%。 


如 图 3-249 所 示 。 





将 


的 图 像 
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ns Et 











Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 








O09 将 其 转换 为 智能 对 锅 ， 为 图 层 添 加 “渐变 倒 加 ”图 层 样 式 ， 如 图 3-252 所 示 。 
绘制 圆 ， 将 该 图 层 向 下 移动 一 层 ， 如 图 3-253 所 示 。 




















新 变 到 加 
新 变 
混合 模式 (0): 又 加 ~ 辣 仿 色 
不 透明 度 (P): » [I ]% 
新 交 : [村 旺旺 二 到 到 |v| 站] 反 向 (R) 
样式 (0): 角度 ~ ” 财 与 图 层 对 齐 (1) 
角度 NW: | | 1 90 度 
缩放 (5): = 100 。 听 % 
[设置 为 默认 值 | | 复位 为 默认 值 | 








图 3-252 添加 “渐变 荆 加 ”图 层 样 式 图 3-253 绘制 圆 


TU ， 其 转换 为 智能 对 和 象 ， 并 执行 “ 滤 镜 ”| “模糊 ”| “高 斯 模糊 ”人 命令， 弹出 “ 
斯 模糊 ”对 话 框 ， 设 置 相 关 参 数 ， 如 图 3-254 所 示 。 
确定 后 的 图 像 效果 如 图 3-255 所 示 。 使 用 “椭圆 工具 ”绘制 正 圆 ， 


AA 
// 用 全 人 


rn EI 50 





轩 预 览 (P) 














图 3-254 设置 相关 参数 图 3-255 图 像 效果 图 3-256 绘制 正 圆 


yy T 人 为 图 层 添加 “渐变 告 加 ”和 “外 发 光 ” 图 层 样式 ， 如 图 3-257 所 示 。 确定 后 的 
图 像 效 果 如 图 3-258 所 示 。 
































渐变 严 加 处 发光 
渐变 结构 
混合 模式 (D): 正常 v 上 | 仿 色 混合 模式 (E): 滤 色 
不 透明 度 (P): 100 % 不 透明 度 (0O): 35 % 
i | T&A 杂 色 (NW): 4 0 % 
样式 人: 角度 Y 加 与 图 层 对 齐 钊 a 图 
角度 :| 上 | 50 度 
~、/ 图 素 
缩 才 (6): zs 100  % 
方法 (Q): 杀 和 
| 设置 为 默认 值 _| | 复位 为 默认 值 | 扩展 (p): 所 0 % 
大 小 (5): 35 像素 

















图 3-258 图 像 效果 


图 3-257 添加 图 层 样式 


124 











7 0 本 | 呈 玫 风 | 攻 司 癌 区 证 全 二 则 2 
wy 数 ， 如 图 3-259 所 示 ， 并 取消 选中 “外 发 光 ” 图 层 样 式 。 确 定 后 的 图 像 效 果 如 
图 3-260 所 示 。 
































新 变 杰 加 
新 变 
混合 模式 (0): 正常 ~ 辣 仿 色 
不 透明 度 (P): zy 100 % 
EE MAN 
样式 (1): 角度 ~ 同 与 图 层 对 齐 个 
角度 (N): | 站 \ 90 度 
缩放 (5): - 100  % 
| 设置 为 默认 值 。| | 复位 为 默认 值 | 
图 3-259 修改 “渐变 到 加 ”参数 图 3-260 图 像 效果 


7 再 复制 一 层 ， 清 除 图 层 样式 ， 双 击 打 开 “ 图 层 样式 ”对 话 框 ， 设 置 “混合 选项 ” 
与 “ 描 边 ”参数 ， 如 图 3-261 所 示 。 确 定 后 的 图 像 效 果 如 图 3-262 所 示 。 









































混合 选项 描 边 
常规 混合 a 
混合 模式 (0) 开 党 大 小 (5): G5 1 像素 | 
式 (D): 正品 M4 位置 各 ): 内 部 吕 
不 透明 度 (0): DE % 混合 模 式 (8)， 正 党 - 
高 级 混合 不 透明 度 (O): = 100 % 
填充 不 透明 度 (F): G 0 % 填充 类 型 F): 渐变 ~ J 
通道 : [VRR) 回 G(GG) 回 BGB) 六 : [了 [| 包皮 向 (R) 三 
控 空 N: 无 > 样式 (DD): 线性 ~ 辐 与 图 层 对 齐 (9) 于 
回 ] 将 内 部 效果 混合 成 组 各 角度 (W): 上! ) 50 度 器 仿 色 面 
周 将 剪贴 图 层 混合 成 组 (FP) 4 了 中 
同 透 8 和 图 层 ( 缩小 CO): 5 100 % 
vy 图 层 蒙 版 隐藏 效果 (5) en 见 
门 矢量 蒙 版 隐藏 效果 (H) | 设置 为 默认 值 | | 复位 为 默认 值 | 于 
素 
有 上 
图 3-261 设置 参数 图 3-262 图 像 效 果 下 


70 使 用 “椭圆 工具 ”绘制 正 贺 ， 如 图 3-263 所 示 。 用 同样 的 方法 ， 依 次 复制 图 层 
2 并 设置 图 层 样 式 ， 图 像 效 果 如 图 3-264 所 示 。 


@ 


图 3-263 绘制 正 圆 图 3-264 图 像 效 果 
AAA /人 使 用 “矩形 工具 ”绘制 矩形 , 并 复制 两 层 , 如 图 3-265 所 示 。 选择 第 一 个 矩形 图 技 ， 
/0O 为 图 层 添 加 “渐变 登 加 ”和 “投影 ”图 层 样式 ， 如 图 3-266 所 示 。 












































渐变 县 加 投影 
渐变 结构 
混合 模式 (0): 正常 ~ 回访 色 
不 透明 度 P): 一 100 % 瘟 合 模式 (6): 正片 亚 底 ” 国 国 
渐变 : 医 Iv] 丫 反 向 R) 不 透明 度 (O): 7 | 
式 (): 线 | 加 与 图 层 8 
样式 (): 线性 可 与 图 层 对 齐 人 角度 AU: (人 -56 一 谨 回合 用 全 国光 全 
角度 :| 一 | 0 度 -ae 
缩 扑 G5): 一 a 100  % 距离 D): 人 1 像素 
es 扩展 (R): G 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 人 小 人 像素 
图 3-265 绘制 矩形 并 复制 两 个 图 3-266 添加 图 层 样式 


125 








了 如 


| | ee Wb es A 
DATASHAD 1 | 了 了 条 开 J 1] 之 1] 十 从 入 11 全 人 震 ] 许 
J yi eid : Ss | DN | SA j 工 J 个 里 入 
| 9 es mt| 必 o< 全 | 了 加 J 个 三 


确定 操作 后 的 图 像 效 果 如 图 3-267 所 示 。 用 同样 的 方法 ， 设 置 另外 两 个 矩形 的 
图 层 样式 ， 效 果 如 图 3-268 所 示 。 


选择 3 个 矩形 , 将 其 复制 到 另 一 侧 ， 并 在 “图 层 样 式 ” 对 话 框 中 选择 “渐变 车 加 ” 
中 的 “ 反 向 ” 复 选 框 ， 效 果 如 图 3-269 所 示 。 


图 3-267 图 像 效 果 图 3-268 其 他 效果 图 3-269 复制 并 修改 图 层 样 式 的 效果 


用 前 面 的 方法 绘制 圆 并 添加 图 层 样式 ,效果 如 图 3-270 所 示 。 使 用 “绘图 工具 ” 
绘制 图 形 , 如 图 3-271 所 示 。 为 图 层 添 加 图 层 样式 ,添加 后 的 效果 如 图 3-272 所 示 。 


加 加 多 


图 3-270 绘制 圆 3-271 绘制 图 形 








3-272 添加 图 层 样式 效果 
使 用 “ 圆 角 和 矩形 工具 ”绘制 圆 角 和 矩形， 如 图 3-273 所 示 。 为 图 层 添 加 图 层 样 式 ， 


添加 后 的 效果 如 图 3-274 所 示 。 继 续 使 用 “ 圆 角 和 矩形 工具 ”绘制 贺 角 和 矩形， 如 
图 3-275 所 示 。 


OF SN 


3-273 绘制 圆 角 和 珑 形 3-274 添加 图 层 样 式 的 效果 3-275 绘制 圆 角 矩形 





用 同样 的 方法 绘制 小 镜头 ， 如 图 3-276 所 示 。 使 用 “ 顶 圆 工具 ”和 “ 竹 形 工具 ” 


绘制 图 形 ， 如 图 3-277 所 示 。 复 制图 层 ， 修 改 颜 色 并 调整 位 置 ， 如 图 3-278 所 示 。 


3 


图 3-276 绘制 小 镜头 图 3-277 绘制 图 形 图 3-278 复制 并 调整 
为 图 层 添 加 图 层 样 式 ， 效 果 如 图 3-279 所 示 。 复 制图 层 ， 并 调整 到 右 侧 ， 如 图 
3-280 所 示 。 
使 用 “椭圆 工具 ”绘制 圆 路 径 ， 使 用 “ 横 排 文字 工具 ”在 路 径 上 输入 文字 ， 如 
图 3-281 所 示 。 


3-279 添加 图 层 样式 的 效果 图 3-280 复制 并 调整 3-281 输入 文字 





为 文字 图 层 添 加 “渐变 登 加 ”图 层 样式 ， 如 图 3-282 所 示 。 单 击 “ 确 定 ” 按 钮 
完成 本 实例 的 绘制 ， 如 图 3-283 所 示 。 














新 变 靶 加 
渐变 
温 语 模式 (0): 正常 = 仿 色 
不 透明 度 (P): FI |% 
六 交 ， | 本 本 天 天 晤 枯 || | 反 向 人) 
样式 QL): 线性 ”I 与 图 层 对 齐 们 
角度 Mj:( 上 186 诬 
in - 100 及 
| 设置 为 默认 值 | | 复位 为 史记 值 | 








3-282 添加 “渐变 亚 加 ”图 层 样式 3-283 完成 绘制 
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“三节 让 按钮 更 吸引 入 的 方法 
按钮 的 作用 就 是 通过 点 击 后 实现 界面 的 操作 。 下 面 介 绍 让 按钮 吸引 人 点 击 的 方法 。 
利用 色彩 、 形 状 、 字 体 等 不 同 ， 赋 予 按钮 独特 的 视觉 效果 ， 使 它们 能 与 界面 中 的 其 他 
元 素 清晰 地 区 别 开 来 ， 如 图 3-284 所 示 。 





SELECT - J | 王 | 要 | 


EE SETTINGS ™ BUTTON 


COLOUR SIZE&SPACE SHAPE 


Impeeotant Buttons Need contrast 





图 3-284 对 比 突出 


加 使 用 圆 形 或 不 规则 图 形 

如 果 一 个 界面 中 有 很 多 圆 形 的 UI 元 素 ， 不 妨 在 按钮 设计 中 采用 类 似 的 设计 。 当 然 ， 
也 可 以 对 形状 做 相应 的 调整 ， 这 样 可 以 让 按钮 与 界面 形成 一 定 的 对 比 ， 充 分 彰显 按钮 自身 
的 独特 性 。 

(6 描 边 颜 色 的 一 致 性 

我 们 见 到 的 大 多 数 按钮 都 或 多 或 少 地 使 用 了 描 边 效果 。 一 般 说 来 ， 如 果 设 计 的 按钮 比 
背景 色 更 暗 ， 那 么 应 使 用 暗色 的 描 边 效果 ， 其 色调 要 与 按钮 的 颜色 一 致 ， 反之 ， 背 景色 比 
按钮 颜色 暗 ， 则 应 使 用 与 背景 色 一 致 ， 但 略微 偏 暗 的 色调 作为 按钮 的 描 边 色 ， 和 否则， 按钮 
效果 很 可 能 给 人 一 种 “有 点 脏 ” 的 感觉 ， 如 图 3-285 所 示 。 
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BUTTON BUTTON 


没有 描 边 撒 边 颜色 和 按钮 一 致 


BUTTON 


BUTTON 





撒 边 颜色 和 按钮 一 致 朱 边 颜色 和 背景 一 致 


图 3-285 描 边 颜色 的 一 致 性 
EC 多 慎 用 阴影 效果 


当 某 个 元 素 的 色调 比 育 景 更 淡 时 ， 使 用 阴影 有 最 佳 效 果 ; 相反 ， 当 某 个 元 素 的 色调 比 
背景 色 还 要 暗 时 ， 使 用 阴影 效果 就 应 该 十 分 导 重 ， 如 图 3-286 所 示 。 


六 江洲 站 加 指导 国 轩 I ddv 下 





图 3-286 慎 用 阴影 效果 


人 动 小 图 标 ， 大 不 同 

为 了 把 按钮 与 其 他 形状 接近 的 UI 元 素 区 分 开 来 ， 使 用 “指示 箭头 ”这 样 简洁 、 微 小 
的 图 标 往往 能 发 挥 意 想 不 到 的 作用 。 

例如 ， 一 个 指向 右边 的 箭头 图 标 可 能 会 让 用 户 沉 得， 点击 它 会 离开 页 面 或 打开 一 个 新 
页 面 ; 而 一 个 指向 下 方 的 箭头 则 可 能 会 给 用 户 这 样 的 信息 ， 就 是 点 击 它 可 以 打开 一 个 下 拉 
菜单 或 但 看 隐藏 的 内 容 ， 如 图 3-287 所 示 。 
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BUTTON > BUTTON ~ 


图 3-287 不 同 的 箭头 图 标 表达 的 信息 不 同 


@ 让 按钮 主 次 分 明 
如 果 界 面 需要 展示 很 多 选项 和 功能 ， 那 么 使 用 不 同 的 视觉 效果 为 按钮 划分 级 别 就 显得 


BU 为 必要 。 
对 最 重要 的 按钮 应 使 用 最 强烈 、 最 鲜艳 的 色彩 ， 对 其 他 的 按钮 应 按 重 要 程度 次 第 削弱 


色彩 效果 。 在 其 他 方面 也 一 样 ， 对 于 二 级 、 三 级 按钮 ， 应 该 在 大 小 、 字 号 和 特效 等 方面 做 
相应 调整 ， 如 图 3-288 所 示 。 


SECONDARY TERTIARY 





PRIMARY 


图 3-288 主 次 分 明 
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(二 ED 如 问 设 计 优秀 的 应 用 图 标 


通常 情况 下 ， 应 用 的 图 标 是 用 户 对 应 用 的 第 一 印象 。 当 用 户 在 应 用 市 场 中 看 到 应 用 的 
图 标 时 ， 他 们 就 会 根据 看 到 的 图 标 来 推测 应 用 的 使 用 体验 。 如 果 图 标 看 上 去 优美 、 精 致 ， 
用 户 就 会 下 意识 地 认为 这 个 应 用 也 能 够 带 来 优秀 的 使 用 体验 。 

@ 形状 独特 

如 图 3-289 所 示 的 4 个 图 标 各 不 相同 , 有 的 使 用 了 大 量 的 颜色 , 有 的 使 用 了 梯度 颜色 。 
但 是 它们 都 有 一 个 共同 点 ， 那 就 是 使 用 了 简单 的 形状 。 这 种 设计 能 够 让 用 户 立 即 记 住 这 个 


应 用 。 





FY 


Vimeo Flipboard Colorfull Clear 
图 3-289 形状 独特 的 图 标 

国 谨慎 选择 颜色 

要 限制 应 用 颜色 的 色调 ， 使 用 1 ~ 2 个 色调 的 颜色 就 足够 了 了， 颜色 过 多 的 图 标 不 容易 
吸引 用 户 。 

国 避免 使 用 照片 

不 要 在 图 标 设计 中 使 用 照片 ， 如 图 3-290 所 示 ， 从 图 中 可 以 看 出 ， 当 使 用 酒杯 的 照 
片 作 为 应 用 图 标 时 ， 会 给 用 户 简陋 的 感 咒 。 而 在 经 过 设计 后 ， 一 种 优雅 感 会 让 用 户 对 这 个 
应 用 产生 兴趣 。 


半 沙 渊 半 闫 指 刁 国 当 I ddv G3 





图 3-290 避免 使 用 照片 


对 不 用 使 用 太 多 的 文字 

有 不 少 设 计 者 为 了 让 用 户 看 到 自己 的 APP 应 用 软件 ， 会 在 图 标 上 添加 文字 让 用 户 知 
道 应 用 的 名 字 ， 但 是 我 们 要 明白 ， 图 标 在 手机 设备 上 会 变 得 很 小 ， 有 了 时候 会 看 不 清楚 图 标 
上 的 文字 ， 只 会 让 用 户 有 不 好 的 体验 。 应 用 中 只 应 该 出 现 LOGO ， 而 不 要 将 应 用 的 全 称 添 
加 进去 。 如 图 3-291 所 示 的 这 些 文字 应 用 的 图 标 设计 ， 如 果 将 应 用 名 称 添加 到 图 标 中 ， 
会 给 人 一 种 凌乱 的 感觉 。 
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图 3-291 文字 应 用 的 图 标 设计 
准确 地 传递 信息 


准确 地 传递 简单 来 说 ， 要 让 用 户 看 到 你 的 图 标 就 知道 它 是 干什么 的 。 通 过 图 标 颜 色 、 
图 形 、 图 标 所 表现 的 质感 都 可 以 让 人 准确 判断 出 该 APP 的 用 途 ， 如 图 3-292 所 示 。 





图 3-292 准确 传递 信息 
( 弹 富有 创意 
富有 创意 的 图 标 可 以 在 众多 应 用 图 标 中 脱 锋 而 出 ， 创 意 并 不 是 天 马 行 空 ， 而 是 从 实际 
生活 中 找到 突破 ， 并 从 图 标 中 表现 出 来 ， 如 图 3-293 所 示 。 





3-293 富有 创意 





下 


3 的 和 


好学 避 











构图 就 是 在 有 限 的 男 面 中 , 将 各 种 元 素 进行 合理 地 布局 和 安排 ， 
使 图 形 和 文字 在 画面 中 达到 最 佳 位 置 ， 产 生 最 优 的 视 帝 将 采 。 


ZE 九宫 格 网 格 构图 


我 们 最 音 见 的 九 豆 格 构图 是 手机 的 解锁 界面 ， 如 图 4-1 所 示 。 这 种 版 式 主要 运用 在 
以 分 类 为 主 的 一 级 页 面 ， 起 到 功能 分 类 的 作用 。 





图 4-1 九宫 格 构图 
通 单 在 界面 设计 中 ， 我 们 会 利用 网 格 在 界面 中 进行 布局 ， 根 据 水 平方 向 和 垂直 方向 
划分 所 构成 的 辅助 线 ， 设 计 会 进行 得 非常 顺利 。 在 界面 设计 中 ， 九 定格 这 种 类 型 的 构图 更 
为 规范 和 党 用， 用 户 在 使 用 过 程 中 非常 方便 ， 应 用 功能 会 显得 格外 明确 和 突出 ， 如 图 4-2 
所 示 。 
九宫 格 构 图 给 用 户 一 目 了 然 的 感 吏 ， 操 作 便捷 是 这 种 构图 方式 最 重要 的 优势 。 


421 PM 


What are You looking for? 





图 4-2 九宫 格 界面 设计 
灵活 运用 九宫 格 辅助 线 区 分 出 来 的 方块 ， 在 有 规律 的 设计 方法 中 寻找 突破 。 
在 分 配 9 个 方块 的 时 候 ， 不 一 定 要 一 个 格子 对 应 一 个 内 容 ， 也 可 以 一 对 二 、 一 对 多 ， 
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打破 平均 分 割 的 框框 ， 增 加 留 白 ， 调 整 页 面 节奏 ， 或 突出 功能 点 或 广告 。 对 各 个 方块 应 用 
不 同 组 成 方式 ， 页 面 的 效果 也 会 产生 无 数 变 化 ， 如 图 4-3 所 示 。 





iColorDay | 








图 4-3 变化 的 九宫 格 
过 图 4-3 可 以 看 出 ,这 样 的 版 式 同 样 可 以 使 界面 变 得 非常 灵活 , 内容 简 单 ,信息 明了 。 


CI 园 心 点 放射 形 构 图 


圆 是 有 圆心 的 ， 在 界面 中 ， 往 往 通 过 构造 一 个 大 圆 来 起 到 聚焦 、 凸 显 的 作用 。 

放射 形 的 构图 ， 有 凸显 位 于 中 间 内 容 或 功能 点 的 作用 。 在 强调 核心 功能 点 的 时 候 ， 可 
以 试 着 将 功能 以 圆 形 的 方式 排 布 到 中 间 ， 以 当前 主要 功能 点 为 中 心 ， 将 其 他 的 按钮 或 内 容 
放射 编排 起 来 。 

将 主要 的 功能 设置 在 版 式 的 中 心 位 置 ， 就 能 引导 用 户 的 视线 聚集 在 想 要 突出 的 功能 点 
上 ， 就 算 视线 本 来 不 在 中 间 位 置 ， 也 能 引导 用 户 再 次 回 到 中 心 的 聚集 处 ， 如 图 4-4 所 示 。 


一 





图 4-4 圆心 点 放射 形 构 图 
在 界面 设计 中 ， 圆 形 的 运用 能 使 界面 显得 格外 生动 ， 多 效 可 操作 的 按钮 上 或 交互 动画 
中 都 能 见 到 圆 形 的 身影 。 
Nii 有 趣 、 可 爱 、 多 变 的 特质 ， 因 此 在 界面 设计 中 善于 将 圆 形 





的 设计 与 动画 结合 ， 能 让 整个 软件 鲜 活 起 来 。 例 如 加 上 旋转 围绕 的 动画 。 
po 引导 用 户 点 击 操作 ， 突 出 主要 的 功能 点 或 数据 ， 把 


产品 核心 展现 出 来 ， 如 图 4-5 所 示 。 
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图 4-5 界面 中 的 圆 形 
圆心 点 放射 形 的 设计 ， 会 使 软件 感 咒 更 为 智能 化 ， 包 有 罗 万 象 。 
如 果 要 体现 的 功能 点 非常 简单 ， 只 有 几 个 功能 按钮 ， 可 党 试 大 圆 的 展示 设计 ， 突 出 最 
重要 的 功能 ， 然 后 罗列 并 排出 其 他 的 功能 点 。 这 种 方式 非 党 实用， 就 和 男 重 点 一 样 ， 圈 出 
最 重要 的 数据 。 善 于 运用 大 圆 构图 ， 能 撑 起 整个 画面 ， 让 界面 圆润 而 饱满 ， 如 图 4-6 所 示 。 
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4-6 大 圆 的 展示 设计 
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这 类 构图 方式 主要 运用 在 文字 与 
图 标的 版 式 中 ， 能 让 界面 保持 平衡 、 
稳定 。 从 上 至 下 式 的 三 角形 构图 ， 能 We 
把 信息 层级 罗列 得 更 为 规整 和 明确 。 br 
在 界面 中 ， 三 角形 构图 大 部 分 都 
是 图 在 上 ， 字 在 下 ， 阅 读 更 为 舒服 ， 
有 重点 ， 也 有 具体 描述 。 如 图 4-7 所 
示 ， 登 录 页 在 设计 中 将 LOGO 作为 了 


图 形 的 部 分 ， 输 入 框 就 是 产品 的 核心 
描述 4_7 三 角形 构图 
@ 





个 人 信息 页 常用 三 角形 构图 。 头 像 明 确 了 这 个 页 面 的 内 容 ， 而 下 面 的 粉丝 、 喜 欢 等 数 
据 就 是 对 本 人 的 一 个 描述 和 介绍 ， 如 图 4-8 所 示 。 

如 图 4-9 所 示 ， 儿 童 卫士 宝贝 信息 设置 页 面 运用 到 三 角 构 图 ， 并 与 圆 形 构图 相 结合 。 
将 体重 刻度 做 成 可 滑动 操作 的 方式 ， 而 卡通 形象 来 突出 设置 的 对 象 及 这 个 页 面 的 功能 。 
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图 4-8 三 角形 构图 图 4-9 三 角 构 图 与 圆 形 构图 的 结合 


CI SF 字形 构图 


在 进行 界面 设计 的 时 候 ， 对 用 户 视觉 移动 方向 的 预 设 是 非常 重要 的 。 在 界面 中 加 入 更 
为 顺畅 的 引导 用 户 视线 移动 的 元 素 ， 就 能 使 用 户 更 多 地 观察 到 产品 的 核心 和 产品 的 卖点 。 

视线 流动 的 轨迹 大 多 是 从 上 至 下 、 从 左 到 右 移 动 ， 如 果 不 能 围绕 这 样 的 视线 轨迹 进行 
排版 ， 用 户 在 阅读 的 时 候 会 变 得 很 吃力 ， 找 不 到 重点 ， 使 用 户 产 生 反 感 。 所 以 在 界面 设计 
中 格外 需要 注意 这 个 地 方 。 现 在 界面 一 般 是 上 下 滑动 的 ， 做 好 视线 引导 ， 可 以 大 大 减 小 用 
户 的 负担 和 阅读 疲劳 。 

界面 中 最 基础 的 是 S 形 视线 构图 ， 如 图 4-10 所 示 。 


图 4-10 S 形 视 线 构图 


| 医 受 


衬 疯 是 因 普 团 济 冯 直下 中 
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在 界面 中 怎么 运用 S 形 视线 构图 呢 ? S 形 视线 大 家 都 懂 ， 天 键 是 如 何 运用 好 S 形 视 
线 来 抓 住 用 户 眼球 。 

首先 看 一 下 视线 的 轨迹 ， 在 视线 转角 处 视 党 轨迹 最 为 密集 ， 浏 览 更 多 地 集中 在 切换 的 
地 方 ， 视 线 转折 的 地 方 停留 时 间 最 长 ， 如 图 4-11 所 示 。 所 以 应 该 把 重要 的 想 要 突出 的 产 
品 或 功能 放 在 这 里 ， 这 样 更 容易 让 用 户 记 住 产品 的 忌 点 。 


4-11 视线 转折 处 
此 外 ， 为 了 帮助 引导 视线 的 移动 方向 ， 图 片 的 处 理 也 非常 讲究 。 在 如 图 4-12 所 示 的 
介绍 中 , 第 一 张 图 片 展开 的 效果 用 到 了 三 角形 构图 , 第 一 屏 手 机 展开 方向 与 视线 保持 一 致 ， 
强化 了 引导 视线 轨迹 的 指示 性 。 同 时 多 张 图 片 倍 助 手机 排列 方向 引导 视线 轨迹 ， 很 好 地 实 
现 了 图 片 一 文字 一 图 片 之 加 的 切换 ， 将 用 户 市 入 到 整个 产品 画面 中 。 





兆 眼 设计 

既 菊 航 完 义 。 如 今 又 提升 到 另 一 喜 丑 * 

iPod touch 因 和 间接 奸 菊 的 由 全 需 扎 身 。 训 在 季 里 
标 口 我 骨 几 季 语 党 不 到 它 的 闽 在 + 而且 彦 若 炳 画 
色 册 甘 合 元 风 尔 天 ， 你 其 去 验 以 会 让 其 他 菠 色 。 

看 了 上 Apple EarPods，IPod towch 可 测 丙 名 

了 DE nt bh nn 





图 4-12 构图 
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为 了 使 用 户 阅 读 更 有 推进 性 ,在 图 片 层 次 和 空间 上 ，, 我 们 也 需要 注重 用 户 的 视线 效果 ， 
将 焦点 调整 到 合理 的 视线 位 置 上 ， 产 品 正面 方向 对 准 视 线 的 来 源 点 。 通 过 这 些 调整 不 仅 能 
使 阅读 顺畅 ， 更 加 强 了 界面 的 平衡 性 。 

相 比 于 左右 构图 ，S 形 构 图 在 上 下 滚动 的 页 面 上 优势 非常 明显 。 左 右 构 图 很 容易 给 
疲劳 感 ， 而 S 形 构图 则 将 图 片 和 文字 完美 地 结合 在 一 起 ， 配 以 大 量 的 留 白 ， 如 同 山 间 的 溪 
流 ， 给 人 轻快 流畅 的 感 况 ， 如 图 4-13 所 示 。 


iD5 8 其 就 重大 的 全 新 功能 ， 帮 娘 你 充分 发 握 iPod touch 

的 无 趴 精彩 。 驴 在 ， 你 可 以 在 文 志 入 息 中 加 入 声音 和 视频 ， 

快速 对 照片 进行 精彩 编 锋 ， 辽 能 追 知 自己 的 健康 信息 。 而 全 
新 的 文本 输入 据 到 功 莫 也 让 文字 输入 朗 得 格外 轻松 。 不 仅 如 
此 ， 开 发 者 们 还 司 以 更 加 对 入 翅 运 用 更 湖 工具 开发 比 以 往 更 
出 色 的 app。 

进一步 了 解 105 8 的 功能 





、 
人 配备 一 系列 强大 App 
工作 宴 事 顺手 娱乐 即刻 上 手 。 





iMovie 、GarageBand 、Pages、Numbers 和 Keynote 精彩 更 考 以 往 ， 现 已 为 每 名 购买 的 
iPod touch 准备 襄 绪 。 你 能 随时 开始 控 酒 创 便 ， TR ete 用 以 眉 发 
电子 邮件 、 同 络 冲 兆 、 发 送 文 本 访 息 、 e 视频 通话 ， 
甚至 迁 有 一 划 app epee 新 的 app* 
了 解 于 参 
图 4-13 构图 


洒 灯 困 普 团 油 六 洒 忆 由 


notin 去 用 到 S 形 构 图 ， 增 强 了 穿插 感 和 灵动 性 。 计 
人 物 的 信息 上 下 穿插 布局 ， 头 像 则 成 为 视线 的 转折 点 ， 使 这 种 双 列 模式 的 排版 更 有 节奏 。 
OO ne 
画面 稳定 、 和 谐 。 


9900 Carrier 全 





图 4-14 S 形 构图 
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站 型 | 


和 山大 
中 人 





在 引导 页 中 也 会 常常 运用 到 S 形 构图 。 将 图 文 进行 穿插 布局 ， 这样 的 构图 层次 感 分 明 ， 
ZU RE lA | Be 





图 4-15 引导 页 
由 图 文 版式 布 局 ， 我 们 还 可 以 演变 出 F 形 构图 ， 这 种 类 型 的 构图 大 部 分 运用 在 图 文 左 
右 搭 配 图 和 banner 中 ， 如 图 4-16 所 示 。 使 用 F 形 构 图 能 让 图 文 搭配 更 有 张力 、 更 大 气 ， 
产品 信息 更 为 简单 和 明确 。 


有 中 以 来 
极其 重大 的 
IOS 版 本 


意义 重大 的 改变 ， 不 仅 体 现在 iPhone 6 上 ， 
了 不 起 的 先进 移动 操作 系统 也 同样 实现 了 巨 
大 飞跃 。iO93 8 满载 全 新 功能 ， 将 你 曾经 只 能 
想像 的 美好 变 为 现实 ， 比 如 使 用 Siri 控制 你 家 
中 的 设备 ; 利用 健康 和 健身 app 与 你 的 医生 
展开 交流 。 不 仅 如 此 ， 开 发 者 也 拥有 了 更 深 
入 的 资源 和 更 多 工具 ， 能 将 iD5 8 中 一 些 妙 


不 可 言 的 全 新 功能 融入 到 他 们 的 app 之 中 。 
这 一 切 ， 将 在 大 为 出 色 的 Retina HD 高 洁 虽 


示 屏 上 更 大 有 可 观 。 





图 4-16 图 文 左右 搭配 图 
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在 F 形 构图 的 规律 中 ， 主 图 为 F 的 主干 ， 右 侧 两 行 ( 或 两 部 分 ) 文字 为 辅 ， 要 注意 合 
理 分 配 图 片 和 文字 的 占 比 ， 如 图 4-17 所 示 。 


详细 接 还 











图 4-17 F 形 构 图 
F 形 构图 在 banner 中 的 使 用 , 能 将 标题 更 为 突出 ,主题 更 加 吸引 视线 , 如 图 4-18 所 示 。 


历 人 们 的 
岂 残 于 证 。 


电 提 哪 宗 强 ? | ,2 


今天 长 这 样 





衬 泣 果园 普 团 济 忆 和 涉 下 中 


图 4-18 banner 中 的 F 形 构图 
值得 注意 的 是 ， 要 充分 利用 主 图 画面 的 指向 性 。 比 如 ， 主 图 是 人 物 ， 可 将 文字 放 
其 眼神 、 旨 向、 手势 等 对 应 的 方向 ， 加 强 视 线 引 导 。 如 果 是 产品 图 ， 则 可 以 通过 
产品 的 朝向 来 引导 。 这 样 做 ， 用 户 能 最 快速 地 关注 到 文本 信息 ， 加 强 认 知 度 和 购买 度 ， 如 
图 4-19 所 示 。 
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图 4-19 指向 性 
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一 款 APP 由 多 个 界面 组 成 , 常见 的 界面 有 启动 界面 、 引 导 界 面 、 


~ | 登录 界面 、 注 册 界 面 、 主 界面 、 设 置 界面 等 。 

ED) 启动 界面 \ 引导 界面 
APP 程序 开启 画面 分 为 两 种 .第 一 种 是 前 面 介绍 的 启动 界面 ， 第 二 种 就 是 引导 界面 。 
《 罗 启动 界面 


局 动 应 用 程序 后 ， 进 入 主 功 能 界面 前 会 有 一 张 图 片 或 一 段 动 国 效 采 ， 停 留 数秒 钟 后 消 
失 。 这 张 图 片 或 这 段 动画 效果 被 称 为 应 用 程序 的 启动 画面。 由 于 局 动 男 面 停留 的 时 间 很 短 ， 
就 像 内 现 的 效果 一 样 ， 所 以 也 有 人 把 启动 男 面 称 为 内 屏 。 启 动 界面 对 APP 来 说 非常 重要 ， 
简洁 的 3 ~ 5 个 页 面 能 够 传递 给 用 户 APP 更 新 的 重要 功能 、 引 导 用 户 体验 、 推 出 重大 活动 等 。 

局 动 界面 像 是 应 用 的 一 道门 ， 在 使 用 前 给 用 户 一 个 预示 ， 它 通常 包含 图 标 、 版 本 号 、 
加 载 进 度 等 信息 。 设 计 师 可 以 根据 产品 风格 随意 发 挥 ， 与 图 标 呼应 ， 强 化 产品 的 印象 。 

下 面 介绍 启动 界面 的 展现 方式 。 


”直接 用 百分比 数字 或 者 进度 条 告知 用 户 正 在 进入 中 ,这 类 界面 目前 已 不 是 很 多 
@ 品牌 信息 传递 ! 由 L000、 标语、 产品 主 色 、 版 本 号 、 出 品 团队 、 合作 伙伴 等 元 素 ， 
构成 的 静态 图 片 ， 简 单 且 主 题 突 出 ， 一 般 会 铺 满 屏 幕 ， 如 图 4-20 所 示 。 


(K 
酷 我 音乐 


本 


QQ 网 好 


腾讯 购物 品质 保证 


着 环 用 柄 恋 


Copyright © 2005-2013 Kuwo All Rights Reserved 


图 4-20 品牌 信息 传递 
@@ 与 应 用 内 部 页 面 浑然 一 体 : 这 一 类 型 的 启动 页 使 用 仿造 界面 的 方式 ， 给 用 户 一 
种 已 经 进入 APP 的 假象 。 
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情态 故 吉 共 吗 : 通过 图 片 来 表达 一 个 场景 或 联想 到 一 个 跟 主 题 相 关 的 故事 。 建 
立 与 用 户 使 用 情景 匹配 的 场景 ， 让 用 户 能 建立 一 种 熟悉 的 感受 ， 能 让 用 户 对 引 
导 的 功能 点 感同身受 ， 如 图 4-21 所 示 。 


区 TU 06% Wm 


00 
= [du 


已 隆 眠 电影 


4-21 情感 故事 共鸣 


动态 效果 : 利用 淡出 或 开门 每 转 场 效 果 ， 完 成 过 渡 。 


在 设计 启动 界面 时 避免 显示 无 关内 容 ， 尽 可 能 让 启动 画面 变 得 简洁 、 有 意义 ， 上 毕竟 只 
有 首次 打开 APP 的 那么 几 秒 时 间 。 对 于 用 户 来 说 ， 他 们 希望 立即 体验 这 个 应 用 程序 ， 而 
不 是 欣赏 一 些 无 用 信息 。 比 如 植 入 广告 ， 就 是 非常 令 人 讨厌 的 行为 ， 同 时 也 是 致命 的 。 


国 引导 界面 


APP 的 引导 界面 ， 类 似 于 一 个 简洁 的 产品 说 明 书 ， 其 主要 目的 是 为 了 向 用 户 展示 该 
APP 的 核心 功能 及 用 法 ， 如 图 4-22 所 示 。 一 般 出 现在 用 户 首次 安装 APP 后 打开 的 时 候 。 
欢迎 界面 一 般 为 2 ~ 5 屏 的 全 屏 静 态 图 ， 左 右 滑动 进行 翻 页 ， 有 跳 过 按钮 ， 新 功能 指示 及 
操作 引导 ， 一 般 用 蒙 版 加 箭头 指引 的 形式 完成 。 
一 个 优秀 的 APP 引导 页 ， 能 够 最 迅速 地 抓 住 APP 用 户 的 眼球 ， 让 他 们 快速 了 解 APP 
的 价值 和 功能 ， 起 到 很 好 的 引导 作用 。 目 前 ，APP 引导 页 设计 并 不 是 每 个 APP 的 必 备 设 
计 界 面 。 因 为 一 款 APP 是 否 需要 引导 页 ， 取 决 于 每 个 APP 的 出 发 点 或 用 途 。 





局 局 局 局 
限 束 E 
出 行 就 用 
驾车 族 公交 地 铁 族 步行 百度 地 图 
最 专业 的 语音 导航 最 合理 的 乘 车 方案 首创 语音 指 路 
电子 狗 提 醒 、 避 免 违 章 实时 公交 、 等 车 神器 再 也 不 用 问 路 了 
进入 地 图 


4-22 引导 界面 
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衬 泣 果园 普 团 济 忆 和 涉 下 中 
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引导 界面 按 展 现 方 式 分 为 两 种 ， 一 种 是 透明 的 动 男 浮 层 ， 告 知 用 尸 如 何 操作 ; 一 种 是 
类 似 于 订阅 的 功能 , 以 及 让 用 户 进 行内 容 选择 , 在 选择 操作 后 才 开 始 体验 , 如 图 4-23 所 示 ， 
单 见于 各 种 新 闻 资 讯 客 户 站 。 





您 现在 的 身份 是 











图 4-23 用 户 选 择 
第 一 种 应 用 最 多 ， 又 可 以 细 分 为 功能 介绍 型 、 情 感 带 入 型 、 趣 味 搞笑 型 3 类 。 


功能 介绍 型 


从 整体 上 采取 和 平 铺 直 叙 型 的 方式 介绍 APP mi 帮助 用 户 六 体 上 了 解 APP 的 
概况 。 用 户 浏 览 新 安 狂 的 APP 界面 时 间 不 会 超过 3 秒 ， 在 这 样 宝贵 的 3 秒 里 ， 需要 用 简 
要 明白 、 通 俗 易 懂 的 文案 和 界面 呈现 ， 突 出 重点 ， | 


@ 括 图 与 重点 文字 相 结合 : 使 用 简单 的 文字 与 简易 的 插图 表示 主题 ， 如 图 4-24 
所 示 。 














图 4-24 插图 与 重点 文字 相 结合 
简短 的 文字 + 该 功能 的 界面 截图 : 如 图 4-25 所 示 ， 这 种 方式 能 较为 直接 地 传 
达 产 品 的 主要 功能 ， 缺 点 在 于 过 于 模式 化 ， 显 得 千 篇 。 
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中国 移动 全 > 





21:50 @ ¥ 20% 


独立 播放 音乐 / 视频 
全 新 的 附近 交友 


京东 康夫 (Kongtu) KF8911 
从 2200W 专 豆 电 钦 民 


79 苑 多 部 


Ez) 地 而 
赂 下 优 这 忧 这 月 光 SHOW 


MS 





资深 小 编 精 选 
从 海量 折扣 信息 中 短 选 ， 只 推荐 


和 AAA 下 [= 
高 性 价 比 优质 商品 


图 4-25 简短 的 文字 + 该 功能 的 界面 截图 
@@ PP 上 下 滑动 : 与 左右 滑动 不 同 ， 通 过 上 下 滑动 来 展示 线路 、 轨 迹 ， 如 图 4-26 
所 示 。 














旅游 攻略 旅游 攻略 旅游 攻略 
旅游 攻略 \ 4 

玩 什 么 ? 更 多 实用 贴 士 

党 

覆盖 国内 外 见 
| 三 | 界 
吃 什 么 ? @ 而 

总 构 

住 哪里 ? 6000000 加 

设 

旅行 ,从 这 里 开始 ! 计 

E33 








4-26 APP 上 下 移动 
@@ APP 动态 效果 与 音乐 、 视 频 融合 的 表现 方式 : 除了 之 前 静态 的 展示 方式 之 外 ， 
APP 也 可 以 采用 一 些 优美 的 动态 效果 ， 比 如 页 面 之 间 切 换 的 方式 、 当 前 页 面 的 
动态 效果 展示 等 ， 还 可 以 加 入 音乐 ， 微 视频 等 。 
© 使 用 说 明 : 在 打开 界面 后 ， 以 半 歼 明 的 背景 + 文字 的 方式 直接 进行 说 明 ， 如 图 4-27 
所 示 。 


人 VA 
“关注 :收藏 ;的 乞 人 在 这 里 咯 / 





4-27 使 用 说 明 
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情感 市 入 型 。 


通过 文案 和 配 图 ， 引 导 用 户 去 思考 这 个 APP 的 价值 ， 把 用 户 的 需求 透 过 某 种 情感 去 


表现 出 来 ， 更 加 形象 化 、 生 动 化 、 立 体 化 ， 加 强 产品 的 预 热 ， 让 用 户 有 种 惊喜 


ol 口 
处 /CO 





2 


© 这 种 方式 是 目前 常见 的 形式 之 一 。 插 图 多 具象 ， 以 使 用 卡 
通 人 物 、 场 景 、 照 片 或 者 是 玻璃 大 背景 为 主 ， 来 表现 文字 内 容 。 这 种 APP 引导 
界面 设计 的 表现 方式 被 设计 师 采 用 的 居多 。 这 样 设计 出 来 的 引导 界面 视 党 冲击 
力 很 强 ， 如 图 4-28 所 示 。 


eoo000 中 国联 通 令 14:07 ecooo 中 国联 通 令 14:07 中 国联 通 令 14:07 


《返回 QQ 空间 6.0 预 约 ee 《 返回 leleJes la [At Se 《返回 QQ 空间 6.0 预 约 





pe 有 奖 预约 。 


i i “Yl 


4-28 文字 与 插图 的 组 合 
Oy 通过 多 页 来 讲 一 个 串联 的 故事 。 一步 抛 出 一 个 需 告知 的 点 ， 和 循序 渐 
进 地 解说 ， 如 图 4-29 所 示 。 故 事 可 以 只 围绕 一 个 功能 点 来 叙述 ， 也 可 以 将 多 
个 功能 点 串联 起 来 变 成 一 个 故事 , 形成 一 个 完整 的 故事 。 由 于 每 次 一 个 告知 点 ， 
多 会 采用 聚焦 的 设计 手法 ， 把 视觉 注意 力 吸引 到 每 个 告知 点 上 。 讲 故事 的 主要 
目的 是 布 望 构建 用 户 与 产品 之 间 的 联系 。 


如 你 所 知 ， 一 切 从 照片 开始 你 就 拥有 了 自己 的 相册 
微 信 不 只 是 一 个 聊天 工具 你 拍 了 一 张 照片 


在 "朋友 图"”， 
你 可 以 了 解 朋友 们 的 生活 





4-29 讲 故 事 型 





趣味 搞笑 型 。 


综合 运用 拟人 化 、 交 互 化 表达 方式 ， 通 过 扮 角色 、 讲 故事 ， 根 据 目 标 用 户 的 特点 来 选 
择 ， 让 用 户 喘 临 其 境 ， 最 后 使 用 户 心情 愉悦 ， 这 种 类 型 的 阅读 量 最 高 ， 如 图 4-30 所 示 。 


天 降 i] 单 处 是 多 


了 从 夭 
各 溉 和 局 电 
-~ 


soe, 3 


ES 


< 多 





图 4-30 趣味 搞笑 型 


有 登录 另 面 


账号 登录 在 各 大 APP 中 已 经 普 般 存在 了 ， 登 录 界 面 是 非常 重要 的 一 屏 。 登 录 界 面 一 
般 包括 用 户 名 、 密 码 、 操 作 按钮 、 密 码 帮 助 、 注 册 选 项 等 信息 , 很 多 应 用 还 会 添加 用 户头 像 。 


一 


SWEET 


本 实例 制作 的 登录 界面 ， 以 头像 、 简 单 的 注册 信息 为 主要 内 容 , 体现 简洁 的 界面 风格 。 
背景 为 深 灰 色 ， 登 录 按 钮 为 对 比 鲜明 的 蓝 色 ， 十 分 突出 ， 制 作 流 程 如 图 4-31 所 示 。 








4-31 制作 流程 
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Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 





站/ 制作 步 又 


知识 点 剪贴 蒙 版 、“ 自 定形 状 工具 ”、 图 层 样式 
光盘 路 径 第 4 章 \4.2.2 登录 界面 


本 
LT7 8 
画布 填充 深 灰 色 ， 使 用 “椭圆 工具 ”绘制 正 圆 ， 填 
充 颜 色 为 白色 ， 如 图 4-33 所 示 。 








5 


/ 
































新 寻 | 
名 称 (N): 未 标题 -1 
预 设 (P): 自 定 > 
宽度 (W): 1080 像素 v 肌 除 预 设 (D).. 
高 度 (H): 1920 像素 - 
分 辩 率 (R): 72 像素 / 葛 寸 “> 
颜色 模式 (M): RGB 颜色 ~ 8 位 
背景 内 容 (C): 白色 ~ 图 像 大 小 : 
和) 高 级 5.93M 
颜色 配置 文件 (D): sRGB IEC61966-2.1 
像素 长 宽 比 (X): 方形 像素 ~ 











图 4-32 新 建文 档 图 4-33 绘制 正 圆 
0 为 图 层 添 加 “投影 ”图 层 样 式 ， 如 图 4-34 所 示 。 之 后 将 素材 图 片 拖 入 文档 中 ， 
一 = 并 创建 剪贴 莹 版 ， 如 图 4-35 所 示 。 使 用 “ 圆 角 短 形 工具 ”绘制 圆 角 珑 形 ， 如 图 
4-36 所 示 。 
































He 
混 舍 模式 (6) 正片 秋 底 ~ 国 国 
不 透明 度 {o): 2 75  % 
角度 (A): [上 50 度 回 使 用 全 局 光 (G) 
中 高 0): 一 1 像 志 
扩展 RJ): 一 0 号 
大 小 5): 国人 5 像素 
图 4-34 添加 “投影 ”图 层 样式 图 4-35 添加 素材 图 4-36 绘制 圆 角 算 形 


0 pF 为 图 层 添加 “ 描 边 ” “内 阴影 ”“ 内 发 光 ” 图 层 样式 ， 如 图 4-37 所 示 。 





























所 由 内 阴影 内 发 光 
结构 结构 结构 
大 小 8): 5 一 一 5 借 素 混合 模式 @)， 正片 到 底 - EM 四 
位 置 (P): 外 部 > 不 透明 度 (0): = 24  % te 正 请 到底 7 
; ~ OO): 100 %% 
混合 模式 (6): 正常 v 
角度 (A): | 1 90 度 回 使 用 全 局 光 (G) 。 Ap 
不 透明 度 Dj 一 % 2 杂 色 (N): < 0 % 
Wi 人 图 [| 
填充 类 型 FF): 颜色 v 阻塞 (0): 5 0 % 
颜色 : 大 小 (5): 4 1 像素 图 素 
品质 方法 (Q): 柔和 
雪线: | - 消除 锯 频 D 源 :名 居中 人 E) 回 边缘 (6) 
杂 色 (N): (5 0 % 阻塞 (0): < 0 % 
[设置 为 默认 值 _】 | 复位 为 默认 值 | 三 设置 为 各 认 值 | 「 复位 为 点 认 值 | 大 小 (5): G 1 像素 




















图 4-37 添加 图 层 样 式 
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(4 wn 


WO jin 4-40 所 示 。 


确定 操作 后 的 图 像 效果 ， 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 图 4-38 所 示 。 
层 ， 调 整 位 置 并 修改 文字 ， 如 图 4-39 所 示 。 继 续 使 用 “ 圆 角 矩形 工具 ” 绘 





图 4-38 输入 文字 


O05 为 图 层 添 加 “ 描 边 











77 


图 4-39 复制 并 修改 


图 4-40 绘制 圆 角 和 珑 形 


“渐变 登 加 ?” 和 “ 投 i 图 层 样 式 ， 如 图 4—41 所 示 。 























措 边 2 
结构 新 变 杰 加 投影 
大 小 (5): 2 ”像素 渐变 结构 
位 置 (P): 内 部 ~ 混合 模式 (oO): 正常 ~ 回 仿 色 合 模 式 (6): 正片 县 底 ~ 国 
混合 模式 (6): 正常 “ 不 透明 度 (P): 100 % 
不 透明 度 (O): 100  % 新 变 : 醒 一 一 一 后 向 (R) 不 ] 委 明度 (O): 人 75 % 
填充 类 型 (F): 颜色 ~ 下 
样式 (): 线性 yj 与 图 层 对 齐 锯 角度 (A): | “| 90 度 加 使 用 全 局 光 (G) 
J 上 距离 D): 人 二 像素 
a J 1 
缩放 (5): 人 100 % 扩展 RR): /一 0 % 
| 设置 为 默认 值 | | 揽 位 为 默认 值 | i 
a [ 巧 5 大 小 GS): 到 5 “J 











图 4-41 添加 图 层 样式 
06 /人 确定 后 使 用 “ 横 排 文字 工具 ”输入 文字 , 如 图 4-42 所 示 。 
选择 “矩形 工具 ”绘制 矩形 ， 然 后 使 用 “ 自 定形 状 工具 ” 
形状， 如 图 4-43 所 示 。 为 形状 图 层 添 加 “投影 ”图 层 样式 ， 
4-44 所 示 。 








投影 
结构 
混合 模式 (B): 正片 琶 底 ~ 国 国 
不 透明 度 (D): 一 TO % 
角度 (9):| | 90 ” 度 园 使 用 全 局 光 (G) 
距离 D): 于 1 像素 
扩展 (R): < 0  % 
大 小 (5): 4 1 像素 








4-42 输入 文字 图 4-43 绘制 图 形 


图 4-44 添加 “投影 ”图 层 样 式 
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更 哆 ZU Photoshop 热门 命 PP 类 型 设计 从 入 门 到 精通 
名 





0 阿 为 矩形 图 层 添 加 “ 描 边 ”和 “投影 ”图 层 样式 ， 如 图 4-45 所 示 。 























描 边 
结构 返 影 
大 小 (5): 4 1 像素 洁 构 
位 置 (P): 内 部 vv -日 < :YE 到 
eg 二 - 混合 模式 (6)， 正片 释 底 | 
不 透明 度 (0): py 100  % 二 天 明 度 (CY: 二 厅 0 
EE 角度 (A): [| 人 1 90 ” 度 团 使 用 全 局 光 () 
新 名: 国 国 wr 
距离 他 ): /全 1 像素 
扩 民 人): /全 0 o% 
太 小 (5): 梧 1 像素 
| 设置 为 默认 值 | | 复位 为 默认 什 




















图 4-45 添加 图 层 样 式 
A oi, 
OO 如 图 4-46 所 示 。 
A A ER | A 
WA 文字 ， 如 图 4-47 所 示 。 





图 4-46 绘制 图 形 并 输入 文字 图 4-47 绘制 直线 并 输入 文字 





日 昆 境 | 头 ， :| 时 口 党 


— VV 


提示 选择 “ 自 定形 A | 
OG 状 工具 ”后 ， 在 选项 栏 W 
中 可 以 选择 不 同 的 形 
状 ， 如 图 4-48 所 示 。 


| READNORE | 








| 

X 
宙 
Y 





f 
类 
人 _ 
3 
姜 





从 
独 
Cf 
-小 
了 
本 


Fn 


4-48 选择 不 同形 状 
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(IE 设置 界面 


设置 界面 在 APP 中 的 应 用 也 很 多 ， 主 要 是 用 于 设置 各 项 参数 的 ， 用 户 根据 自己 的 习 
惯 设置 后 能 提升 用 户 体验 。 


“设计 思路 





本 实例 制作 的 设置 界面 中 用 线性 图 标 标 记 主 要 设置 项 , 以 列表 的 形式 列 出 设置 的 内 容 ， 
[ 辣 ， 府中 有 E 人 到 加 | 全 有 


设置 








返回 设置 返回 设置 

图 每 次 启动 打开 相机 每 次 启动 打开 相机 及 
鸭 水 管理 国 水管 理 

收藏 中 心 收藏 中 心 


@ 国 声音 设 秆 国 声音 设置 


国 常用 地 址 国 常用 地 址 
高 级 设置 高 级 设置 


订阅 动态 订阅 动态 | 4 
在 WIFI 下 更 新 在 WIFI 下 更 新 局 
帮助 中 心 帮助 中 心 

关于 关于 


图 4-49 制作 流程 


2 制作 步骤 


图 层 样 式 、 北 镜 





第 4 章 \4.2.3 设置 办 下 

















图 4-50 绘制 圆 角 和 矩形 


0) 7 新 建文 档 ， 使 用 “ 圆 角 矩形 工具 ”绘制 圆 角 拢 形 ， 
如 图 4-50 所 示 , 为 图 层 添 加 “内 阴影 ?和 “渐变 县 加 ” 
图 层 样式 ， 如 图 4-51 所 示 。 












































内 阴影 渐变 亚 加 
二 新 变 
混合 模式 (6) 正片 又 底 ~ 国 国 A pr 
i 混合 模式 (D): 正常 = 回 态 色 
~] 委 日 :pe 70 % 
角度 (A): | ， ) -30 ” 度 回 使 用 全 局 光 (G) Se a a 
、L 洲 六: |v| 史 反 向 f) 
距 高 D): = 一 2 像素 | 
了 六 (Cc): Ao | 样式 (0D): 线性 ”IY 与 图 层 对 齐 (D) 
| 大 小 (5): G 0 像素 角度 (N): ( | 】 90 四 
品质 — 
: 多 才 (5): zs 100  % 
| 4 - 回 消除 据 齿 (0) 
杂 色 (: G 0  % 设置 为 默认 值 复位 为 默认 值 








[设置 为 默认 值 | | 复位 为 默认 值 | 

















图 4-51 添加 图 层 样式 


ed 











Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 





gn 确定 操作 后 的 图 像 效 果 如 图 4-52 所 示 。 使 用 “ 横 排 文字 工具 ”输入 文字 ， 并 为 
一 图 层 添加 “投影 ” 图 层 样式 ， 如 图 4-53 所 示 。 确 定 后 的 文字 效果 如 图 4-54 所 示 。 
一 投影 一 
结构 
混合 模式 (6): 正片 又 底 ~ 国 国 
不 透明 度 0): 一 因 |% 

角度 :| | 】-50 。 度 站 合用 全 局 X(9) 























距离 DO): (一 2 像素 
扩展 (CS 0 % 
大 小 (9): CS 0 像素 


党 线 | 4 [| 消除 锯齿 人) 


杂 色 (N): (5 0 % 


纪 图 层 控 空 投影 (U) 


设置 为 默认 值 夏 位 为 默认 值 


图 4-52 确定 后 的 效果 图 4-53 添加 “投影 ”图 层 样 式 图 4-54 文字 效果 





品质 



































四 复制 图 层 样式 .绘制 图 形 并 输入 文字 ,为 文字 图 层 粘 贴图 层 样式 , 如 图 4-55 所 示 。 
LA] 设置 形状 图 层 的 “填充 ”为 0%, 为 图 层 添加 “内 阴影 ” 图 层 样式 ， 如 图 4-56 所 示 。 
内 阴影 

结构 

温 合 模式 (6): 正片 受 底 ~ 国 国 

不 透明 度 (D): 一 7 一 一 和 0 % 


角度 和 :| 上) 586 度 门 使 用 全 局 (6) 








距离 (0): ”2 像素 
阻塞 (0): (一 0 % 


大 小 (5): Ce 1 像素 




















设置 为 默认 值 夏 位 为 默认 值 










































































4-55 绘制 图 形 并 输入 文字 图 4-56 添加 “内 阴影 ”图 层 样 式 
内 发光 vy , SD 56 >、 、\ 2 )) 6 > 7 才 及 2? 
结构 0 继续 为 图 层 添 加 “内 发 光 渐变 登 加 
混合 模式 (8)， 正片 又 底 ~ pd duly, ul L! 
不 透明 度 (D): A 和 0 1% 和 投 于 图 层 样 式 ， 如 图 4-37 所 小 | 
杂 色 (N): (一 一 = 一 0 % 
6 国 “ 
一 图 素 一 EO | 
一 渐变 县 加 - ; 一 投影 
方法 (Q): 杀 和 pr 结构 
渐变 a 
淖 : 二 混合 模式 6@): 源 色 -| 
入 口 居 中 国 。 加 边 委 (6) 混合 模式 (0)， 正常 > 回信 色 ee 
阻塞 (0): (一 0 % 不 放 明 度 (p): 本 不 透明 度 (0) 一 50 
大 小 8): S 一 2 你 素 和 = 角度 :| 上 6。 度 加 全 全 局 x 
变 : [| 加 4 
, 渐变 四 反 向 RQ) PR 
a 样式 (0D): 线性 Y” 贱 与 图 层 对 齐 (1) 扩展 RQ: C= 二 一 0  % 
| 4 二 a 大 小 8): 4 一 一 TI 像素 
等 高 绪 : 消除 锯齿 (L) 前 度 (N): ， 】 -90 度 后 
范围 R): 一 一 一 50  % ~ 品 
Eb): Are 0 |e 编 斤 BS): oO 100 % $8 | -| 口 济 Sla0 
i es [设置 因 各 认 值 ] [ 揽 位 为 默认 值 | ea pi 
设置 为 默认 值 复位 为 默认 值 回 图 层 控 空投 影 (J) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 



































图 4-57 继续 添加 图 层 样式 





1S2 


(oO 


条 并 复制 多 个 ， 然 后 绘制 矩形 ， 并 对 线条 进行 对 
aE a ad 


齐 和 排列 ， 





LO 使 用 “ 圆 角 和 矩形 工具 ” 


O 


单 击 “确定 ” 按 馈 


4-58 确定 后 的 效果 


角 和 矩形 》 并 复制 多 


改 颜 色 ， 如 图 4-60 所 示 。 





4-60 绘制 圆 角 托 形 


后 的 图 像 效 果 如 图 
de 本 本 人 


图 每 次 启动 打开 相机 
国 水 管理 
收藏 中 心 
国 声 首 主 
国 党 用 地 直 
高 级 设置 


订阅 动态 
在 WIFI 下 更 新 
帮助 中 心 


大 于 


图 4-62 绘制 箭头 





设置 








4-59 绘制 线条 和 和 矩形 





绘制 贺 LA pp 使 用 多 种 绘图 工具 绘制 图 标 ， 4 
个 ， 分 别 修 yo obit hoa \ 
如 图 4-61 所 示 。 
界 
面 
构 
每 次 启动 打开 相机 
与 
较 水 号 管理 设 
让 
收藏 中 心 
全 声音 设置 
常用 地 址 


高 级 设置 


4-61 绘制 图 形 并 输入 文字 


DS 续 输入 文字 ， 并 使 用 “直线 工具 ” 
O 由 箭头 ， 如 图 4-62 所 示 。 使 用 “ 国 
角 和 矩形 工具 ”绘制 圆 角 和 矩形， 如 图 4-63 所 示 。 


返回 设置 

每 次 启动 打开 相机 TD 
人 必 引 管理 

收藏 中 心 


图 4-63 绘制 圆 角 算 形 


E53 








( 为 图 层 添 加 “ 针 面 和 浮雕” “内 阴影 ” “颜色 梧 加 * 
WA 图 4-64 所 示 。 








一 斜面 和 浮雕 
结构 








样式 人 D):; 外 斜面 了 


方法 (Q): 平滑 筷 
深度 人 JSP | 100 |% 
方向 @ 上 QA 下 


大 小 (2): 后 sme | 3 像素 
软化 中 ): 一 =z3 15 像素 
阴影 - 























角度 (N): 3 90 度 
【 。 ) 回 使 用 全 局 光 (G) 
高 度 ~ 30 度 
3 | 4 消除 锯 频 Q) 
高 光 模 式 (H): 线性 加 容 ~ 国 
不 透明 度 (0): 2 一 一 30  % 
阴影 模式 (A): 颜色 三 淡 -| 


不 透明 度 (C): = 全 25  % 











|_ 设置 为 默认 值 | | 复位 为 默认 值 | 

















不 透明 度 (0): se 15  % 


角度 (A): | 





二 )】 8 度 器 使 用 全 局 光 人 ) 


距离 {D): 一 一 一 1 像素 
阻塞 (0): 4 lo % 
大 小 人) 呈 一 = 5 像素 


杂 色 (N): G % 


高 线 : Pe 回 湖 及 据 具 ( 


内 阴影 - 颜色 到 加 
一 结构 | 一 颜色 
混合 模式 (6): 线性 加 深 ~ 国 国 混合 模式 (6): 正常 ~ 


不 透明 度 (0): py 100 % 





上 设置 为 默认 值 _| | 复位 为 默认 值 | 























[设置 为 默认 值 。] [ 复位 为 默认 值 | 




















投影 
结构 - 
混合 模式 (6): 正常 Md 
不 透明 度 (0): CS 35 % 
角度 (A): | 十 ) 8。 度 回 使 用 全 局 光 人 


距离 (D): 一 ES 二 像素 
扩展 R): C= 0 % 
大 小 BS): 一 > 1 像素 


品质 
等 高 线 : [A 回 清 逐 所 上 人 
杂 色 NI 0 % 


昼 图 层 挖 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 









































i100) 确定 操作 后 的 效果 如 图 4-65 所 示 。 





每 次 启动 打开 相机 
网 水 号 管理 
收藏 中 心 
@ 国 声音 设置 
常用 地 址 


图 4-65 确定 操作 后 的 效果 


/2 


为 图 层 添 加 “ 描 边 % 力 ” 


4-64 添加 图 层 样 式 


“渐变 SS 


/7 


使 用 “椭圆 工具 ”绘制 正 圆 ， 
如 图 4-66 所 示 。 





人] 
| 账号 管理 
收藏 中 心 


每 次 局 动 打开 相机 





图 4-66 绘制 正 圆 


到 加 ” 和 二 笋 最 5” 图 层 样 式 ， 如 图 4 一 07 所 示 。 



































i 渐变 到 加 
> 一 新 变 - 
太一 一 ee 3 | 你 到 一 
位 置 p):， 内 部 > 混合 模式 (D): 正常 
混合 模式 (6): 正常 v 
不 透明 度 (0): 二 py 100 % 
ee 
一 ”填充 类 型 (F): 渐变 v 样式 (0D): 线性 
渐变 : 国 本 ”|v] 回 反 向 角度 (NW): | ey )m 
样式 (QD): 线性 ~ 财 与 图 层 对 齐 (G) AR 
角度 (A): | ry 90 度 仿 色 














缩放 (C): er 100  % 


设置 为 默认 值 复位 为 默认 值 
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不 透明 度 (P): 三 100 % 


潭 克 :[ [| 加 En 











了 | 回 仿 色 

















~ 忆 与 图 层 对 弃 包 
度 


投影 
结构 
混合 模式 (6): 线性 加 深 ~ 国 国 
不 透明 度 (0): As 10 % 
角度 (A): ( | 】50 度 回 使 用 全 局 光 (G) 


距离 0): 一 二 像素 
扩展 Re 0 % 
大 小 (3): 下 一 一 一 =» 3 像素 








[全 100 % 














设置 为 默认 值 复位 为 默认 值 




















消除 锯齿 (L) 
杂 色 人 N): (= 一 0 % 


回 图 层 控 空投 影 (U) 
[ 设置 为 默认 值 。 [ 复位 为 默认 值 | 




















图 4-67 添加 图 层 样 式 








7 了 四 ”确定 后 操作 的 图 像 效果 如 图 4-68 所 示 。 复制 图 层 ， 在 图 层 上 单 击 鼠 标 右键 ， 选 
CA] 择 < 转换 为 智能 对 象 ”命令 ， 然 后 设置 图 层 的 “填充 ”为 0 。 为 图 层 添加 “ 渐 
变 嫩 加 ”图 层 样 式 ， 如 图 4-69 所 示 。 


~ 














一 渐变 要 加 一 = 
ei = 
混合 模式 (QO) 线性 加 深 ~ 辣 仿 色 
不 透明 度 (p): 50 骂 
ey 靳 变 ; /= ”| 回 反 向 
样式 (): 线性 ~， 贺 与 图 层 对 齐 问 


角度 :| | a0 度 


IE Pd00 和 


芭 站 为 默认 什 明 们 为 于 认 值 











图 4-68 确定 操作 后 的 效果 图 4-69 添加 “渐变 晋 加 ”图 层 样式 


7 执行 “ 滤 镜 ”| “模糊 ”| “高 斯 模糊 ”命令 ， 在 弹出 的 对 话 框 中 设置 相关 参数 ， 
如 图 4-70 所 示 。 
7 5 执行 “ 滤 镜 ”| “模糊 ”| “动感 模糊 ”命令 ， 在 弹出 的 对 话 框 中 设置 相关 参数 ， 
如 图 4-71 所 示 。 确 定 后 的 图 像 效 果 如 图 4-72 所 示 。 



































高 斯 模 李 E39| | | 动感 模糊 
站 预览 (P) 
团 预 览 (P) 
日 100% 2 
I 角度 (A: 国度 【| ) 
人 距离 (D): 10 。 。 候 素 
图 4-70 高 斯 模糊 图 4-71 动感 模糊 图 4-72 图 像 效果 


HA /人 将 3 个 图 层 选 中 ， 单 击 鼠 标 右键 ， 选 择 “ 从 图 层 建立 组 ”命令 。 复 制 组 两 次 ， 
/O 并 调整 位 置 ， 并 将 副本 1 的 圆 向 右 移动 ， 如 图 4-73 所 示 。 
Af “双击 副本 1 中 的 圆 角 竹 形 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 修 改 “ 渐 变 痘 加 ”和 “外 
/ 发 光 ” 图 层 样式 ， 如 图 4-74 所 示 。 




















渐变 到 加 外 发 光 
渐变 结构 
订阅 动态 区 混合 模式 (D); 正常 ~ 回 念 色 混合 模式 (E): 到 加 ~ 
不 透明 度 p): D100 % 不 透明 度 (0): TW 75 % 
在 WIFI 下 更 新 2 淅 六 : [En 和 | | 上 反 向 () 杂 色 (N): 4 0 % 
样式 (LD): 线性 Y” 团 与 图 层 对 齐 们 人 加 
帮助 中 心 角度 (N): | 1-90 度 
a 图 素 
缩放 人 ): = 100  % 
关于 方法 (Q): 柔和 ~ 
| 设置 为 默认 值 」 | 复位 为 默认 值 | 扩展 (p): 本 5  % 
友 小 (5): SE | 10 像素 




















图 4-73 复制 并 移动 图 4-74 修改 图 层 样式 


外 号 5 














WS 


返回 设置 
人 3 每 次 启动 打开 相机 
网 水 号 管理 

收藏 中 心 

(四 声音 设置 

常用 地 址 

高 级 设置 


订阅 动态 | 
在 WIFI 下 更 新 
帮助 中 心 


关于 


图 4-75 完成 绘制 


(“了 EY) 空 状态 界面 


“ 空 状态 ”是 指 移动 应 用 界面 在 没有 内 容 或 数据 时 呈现 出 的 状态 ， 也 称 零 数 据 状态 。 

从 产品 体验 的 角度 来 看 ， 空 状态 通常 会 在 初次 使 用 、 完 成 或 清空 内 容 、 软 件 出 错 等 情境 下 
出 现 。 

空 状态 的 设计 足够 优秀 的 话 可 以 提高 用 户 体验 ， 带 有 引导 性 、 愉 悦 性 ， 并 使 得 用 户 留 
存 率 增加 。 

如 产品 初次 使 用 

如 果 用 户 下 载 了 你 的 应 用 并 完成 了 注册 ， 那 么 这 几乎 可 以 代表 他 们 已 经 知道 你 的 产品 
是 做 什么 用 的 了 ， 但 未 必 清 楚 有 具体 怎样 使 用 。 对 于 某 些 类 型 的 应 用 来 说 ， 初 次 登录 之 后 是 
没有 任何 数据 内 容 的 ， 这 也 正 是 充分 利用 界面 空间 为 用 户 提供 新 手指 引 的 好 机 会 。 你 可 以 
告诉 用 户 为 什么 当前 没有 内 容 、 怎 样 创 建 或 获取 内 容 ， 在 这 个 环节 中 ， 不 妨 试 着 融入 一 些 
能 够 体现 产品 个 性 的 情感 化 元 素 ， 这 可 以 使 用 户 进入 一 种 较为 轻松 的 上 手 状 态 ， 引 发 他 们 
积极 、 正 面 的 情感 ， 同 时 也 能 给 他 们 留 下 不 错 的 第 一 印象 。 

在 初 体 验 流程 中 ， 空 状态 的 首要 目标 就 是 教育 、 引 导 用 户 ， 帮 助 他 们 快速 了 解 首要 功 
能 和 操作 方式 ， 避 免 一 上 手 就 产生 迷茫 无 助 的 负面 情绪 。 

通过 初次 体验 流程 当中 的 空 状态 界面 告知 用 户 会 发 生 什么 , 帮助 他 们 建立 预期 。 当 然 ， 
很 多 时 候 你 的 APP 引导 页 就 是 用 来 做 这 个 的 , 但 现实 是 用 户 通常 会 不 耐烦 地 跳 过 引导 页 ， 
即使 有 耐心 去 看 也 难以 在 真正 进入 APP 环境 之 前 记得 各 种 特色 功能 和 操作 方法 。 所 以 ， 
强烈 建议 各 位 将 初次 使 用 的 空 状态 视 为 产品 初 体验 当中 一 个 重要 的 组 成 部 分 来 看 待 。 

好 的 空 状态 设计 可 以 体现 出 以 下 几 个 方面 的 信息 ， 
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@@ 是 什么 : 对 界面 中 的 功能 或 信息 进行 描述 . 
名 在 于 里 : 告诉 用 户 他 现在 位 于 体验 流程 的 起 点 或 其 他 特定 的 位 置 。 
加 何 时 : 暗示 用 户 内 容 的 循环 机 制 ， 让 他 们 知道 怎样 的 行为 会 产生 内 容 。 


通常 可 以 通过 两 种 方式 传达 这 些 信 息 ， 要 么 是 言 简 意 败 的 文案 ， 要 么 通过 示例 内 容 告 
知 用 户 这 里 产生 了 数据 之 后 会 是 怎样 的 形式 ， 为 其 建立 更 直观 的 预期 。 不 管 采用 哪 种 方式 ， 
都 要 提供 必要 的 引导 信息 ， 让 用 户 知 道 要 达成 这 样 的 内 容 状 态 需 要 以 怎样 的 操作 开始 ， 如 
4-76 所 示 。 


x 中 上 溃 下 午 9:42 令 和 i eeeoo 中 国 移动 会 泊 14:27 @ 70% 夯 )， 


《 返回 我 的 收藏 十 


最 近 收 听 ”已 下 载 下载 中 








sp 


”A 把 感 兴趣 的 内 容 都 收 进来 吧 
号 ， 还 没 开始 收听 ? 





您 还 没有 上 传 商 品 图 片 添加 收藏 
点 击 这 里 立即 上 伟 





图 4-76 空 状态 界面 


于 戏 丁 加 全 国 尖 号 入 包 中 


EB 用 户 清空 数据 

用 户 使 用 这 款 APP 是 否 会 频繁 地 清空 数据 ? 如 果 是 的 话 ， 进 行 相 应 的 设计 ， 甚 至 可 
以 准备 一 些 不 同 的 空 状态 内 容 来 随机 展示 。 这 样 的 情况 有 很 多 种 创意 的 APP 设计 ， 比 如 
邮件 APP 设计 ， 如 图 4-77 所 示 。 








好 像 什么 都 没有 .… 


和 全 由 一 十 全 且 


收 件 箱 


图 4-77 用 户 清空 数据 


sy 








更 哆 ZU Photoshop 热门 命 PP 类 型 设计 从 入 门 到 精通 
名 








& 出 错 、 失 败 
“出 错 ” 多 数 是 由 网 络 连 接 的 中 断 引 起 的 。 可 以 试 着 在 这 种 情况 下 提供 一 些 更 有 用 的 
或 是 更 具 亲 和 力 的 内 容 ， 通 过 你 的 设计 弱化 用 户 心中 的 负面 感受 ， 降 低 他 们 对 坏 状 况 的 感 
知 。 让 用 户 在 非常 规 使 用 中 看 到 你 的 设计 ， 他 们 就 会 感知 到 当前 的 状况 是 在 可 预计 范围 之 
内 的 ， 从 而 放松 下 来 ， 如 图 4-78 所 示 。 


eeeeO 中 国联 通 会 ”下午 10:06 @ 9 43% 面 








呵呵 .…. 呵 .呵呵 ! 


信号 不 好 ? 网 络 没 开 ? 秀 喜 了 ? 


同 程 首页 


404 


对 不 起 ， 您 要 找 的 页 面 去 了 水 星 ~~ 





电脑 版 帮助 中 心 意见 反馈 
24 小 时 服务 热线 : 4007-777-777 








图 4-78 出 错 、 失 败 


。 设计 师 必 得 


ZED APP 引导 界面 设计 注意 事项 
下 面 介绍 APP 引导 界面 设计 的 注意 事项 。 
《网 引导 语句 必须 简短 ， 聚 焦 重 点 


在 移动 情境 中 ， 人 机 会 话 时 间 更 加 有 限 ， 注 意 力 更 容易 分 散 。 而 人 类 的 短期 记忆 难以 
保存 太 多 的 内 容 ， 信 息 在 20 秒 左右 的 时 间 内 就 会 开始 刻 遗 忘 。 因 此 ， 相 比 于 在 一 个 浮 层 





上 一 次 性 展示 UI 当中 每 个 地 方 的 说 明 ， 不 如 一 次 聚焦 在 一 两 个 上 面 。 减少 说 明 的 焦点 可 
以 使 用 户 将 注意 力 放 在 最 重要 的 说 明 上 。 一 次 展示 的 说 明 越 少 ， 用 户 越 有 可 能 去 阅读 并 记 
忆 下 米 。 


同时 设计 师 也 要 学 会 挑选 合适 的 时 机 ， 为 用 户 提 供 最 重要 的 引导 提示 ， 一 次 一 个 ， 使 
他 们 更 容易 理解 和 明日 。 

也 要 避免 接连 不 断 地 展示 引导 信息 ， 这 样 不 仅 会 产生 短期 加 重 记忆 方面 的 问题 ， 而 且 
会 让 新 用 户 咒 得 你 的 应 用 过 于 复杂 ， 望 而 生 喧 。 

如 果 需 要 展示 引导 的 文字 太 多 ， 可 以 分 成 几 个 步骤 来 引导 ， 简 化 这 些 文字 。 

精准 贴切 的 文案 也 十 分 重要 ， 将 专业 的 术语 转换 成 用 户 “ 听 ”得 懂 的 语言 。 尤 其 对 于 
通过 照片 来 表现 主题 的 引导 页 设计 ， 文 案 与 照片 的 吻合 度 直 接 影 响 到 情感 传达 的 效果 ， 如 
图 4-79 所 示 。 
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准时 下 班 阁 是 大计 


记录 你 的 时 间 和 速度 i 


4-79 文案 与 照片 吻合 


罗 尽量 使 用 图 形 元 素 

我 们 都 知道 ， 图 形 比 文字 更 易于 记忆 和 了 解 。 最 合理 的 方式 是 : “恰当 的 图 形 元 素 + 
简短 的 文字 ”， 并 整合 到 一 个 展示 层面 上 。 

这 种 方式 既 有 利于 用 户 阅 读 , 也 可 以 使 多 步骤 的 流程 更 直观 、 易 懂 、 易 记忆 , 值得 推荐 。 

另外 ， 我 们 采用 的 图 形 尽量 是 简单 易 懂 、 形 象 具体 的 ， 避 兔 让 人 产生 歧义 的 图 标 。 否 
则 会 误导 移动 用 户 ， 从 而 损失 设计 交互 体验 。 

站 避免 与 实际 UI 界面 混淆 

必须 使 引导 提示 在 外 观 上 与 实际 界面 元 素 有 着 明确 的 区 分 ， 否 则 引导 提示 就 是 在 干扰 
实际 界面 ， 用 户 也 会 感到 迷茫 ， 甚 至 会 把 教学 内 容 当 成 功能 界面 ， 试 着 与 其 交互 。 

要 使 提示 内 容 与 普通 的 界面 元 素 区 分 开 来 ， 最 简单 的 方式 是 使 用 不 同 的 字体 。 我 们 通 
常 可 以 见 到 很 多 手写 字体 风格 的 提示 ， 确 实 可 以 与 实际 UI 当中 的 文字 产生 鲜明 的 对 比 。 

在 进行 手机 移动 APP 应 用 的 引导 设计 的 时 候 , 一 个 重要 的 原则 就 是 尽 可 能 保持 简短 。 
聚焦 于 当前 界面 中 最 主要 的 交互 任务 ， 以 图 文 并 成 的 方式 提供 最 易 扫 描 的 说 明 内 容 ， 避 免 
一 连 串 的 提示 。 同 时 ， 还 要 确保 你 的 提示 内 容 不 会 与 应 用 的 实际 Ul 混淆 在 一 起 。 

@ 半 视觉 聚焦 

在 单个 引导 页 中 , 信息 不 宜 过 多 ,只 阐述 一 个 目的 ,所 有 元 素 都 围绕 这 个 目的 进行 展开 。 
视觉 聚焦 包括 两 部 分 ， 一 是 文案 的 处 理 要 注意 层次 ， 主 标题 与 副标题 要 形成 对 比 ; 二 是 引 
导 页 中 的 界面 、 场 景 、 文 案 具 象 化 元 素 ， 要 有 一 个 视 况 聚焦 点 ， 多 个 视 吕 元 素 的 排 布 采用 
中 心 扩 散 的 方式 ， 聚 焦点 的 视觉 面积 最 大 ， 同 时 与 扩散 的 元 素 拉 开 对 比 。 这 样 用 户 能 清晰 
地 看 到 核心 文案 信息 与 文案 对 应 的 视觉 表现 元 素 ， 同 时 结合 视线 流动 的 规律 ， 从 上 到 下 ， 
从 左 到 右 ， 从 大 到 小 ， 因 此 可 以 根据 这 个 视线 流 的 规律 来 进行 引导 页 的 设计 ， 如 图 4-80 
所 示 。 
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ds 


闻 光 灯 贺 熙 团 涅 六 于 
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图 4-80 视觉 聚焦 


语 于 情感 化 


文 委 具 和 象 化 : 通过 具体 的 元 素 、 场 景 来 表现 文案 ， 采 用 写实 、 半 写实 的 方式 进 
行 表 现 ， 有 些 应 用 还 会 配 以 水 彩 风格 。 以 天 猫 为 例 ， 它 是 一 款 购物 应 用 ， 在 设 
计 上 通过 商场 、 店 铺 的 实际 场景 的 具体 描绘 ， 演 数 轻 松 、 欢 快 的 购物 过 程 ， 如 
图 4-81 所 示 ， 


图 4-81 文案 具象 化 


页 面 动 效 、 页 面 间 交 互 方式 的 差异 化 : 之 前 对 于 表现 方式 的 归 类 已 经 讲 到 了 动 
务 及 页 面 切换 方式 ， 如 果 增 加 了 页 面 动 效 ， 包 括 放 大 、 缩 小 、 平 移 、 深 动 、 弹 
跳 ， 利 用 动 效 使 页 面 的 表现 形式 更 加 多 样 化 ， 会 让 引导 页 更 有 趣 ， 用 户 注 意 力 
更 为 集中 。 

页 面 间 的 切换 方式 : 除了 传统 的 卡片 左右 滑动 的 方式 外 ， 还 可 以 结合 线条 、 箭 
头等 进行 引导 ， 通 常会 配合 动 效 。 例 如 ， 网 易 新 闻 客户 端 、 印 象 笔 记 ， 它 们 在 
引导 页 的 设计 上 采用 了 线条 作为 主线 贯 罕 整个 引导 页 面 ， 小 圆 点 显示 当前 的 浏 
览 进度 ， 滑 动 的 过 程 中 有 滚动 视差 的 效果 ， 如 图 4-82 所 示 。 








图 4-82 趣味 引导 





全 与 产品 基调 相 一 致 

引导 页 在 视觉 风格 与 氛围 的 营造 上 要 与 该 产品 、 公 司 的 形象 相 一 致 ， 这 样 在 用 户 还 未 
使 用 具体 产品 前 就 给 产品 定 下 一 个 对 应 的 基调 。 产 品 的 特性 一 一 消费 类 、 娱 乐 类 、 工 具 类 
还 是 其 他 类 ， 决 定 了 引导 页 的 风格 ， 例 如 是 走 轻松 娱乐 、 小 清新 风格 ， 还 是 规整 、 趣 味 性 
的 风格 ， 在 最 终 的 表现 形式 上 也 会 有 完全 不 同 的 展现 一 一 插图 、 界 面 、 动 画 或 其 他 。 如 淘 
宝 的 娱乐 、 豆 锥 的 清新 文艺 、 百 度 的 工具 、 暗 游记 的 休闲 等 ， 通 过 对 比 束 能 发 现 他 们 在 引 
Uh 天 

这 样 一 方面 有 利于 产品 一 脉 相 承 ， 与 产品 使 用 体验 相 一 致 ， 男 一 方面 也 会 进一步 强化 
公司 形象 ， 如 图 4-83 所 示 。 








图 4-83 与 产品 基调 相 一 致 
又 如 网 易 彩 票 ， 引 导 页 的 主 色 选 用 了 与 网 易 上 自身 的 红色 相 一致 的 红色 ， 在 公司 产品 系 
统 性 上 保持 高 度 的 一 致 性 ， 如 图 4-84 所 示 。 
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于 泌 是 加 莹 国 河 加 维 ，S 








ES 如 主 无 怖 | 


万 元 以 下 自动 和 账 , 万 元 以 上 专人 联系 网 易 官 方 出 品 荣誉 保证 
A / MK — bY 
1 Sis f 
DN 1 ” ~、 sl /8 


中 奖 第 一 时 i 间 | 通知 支付 便捷 受 全 放 岂 





图 4-84 网 易 彩 票 


总 之 ， 想 做 好 引导 页 的 设计 ， 要 在 理解 用 户 对 引导 页 需 来 的 基础 上 上， 怀揣 热爱 产品 


的 情怀 ， 依 靠 精致 的 布局 、 巧 妙 的 构思 、 贴 切 的 氛围 泻 染 ， 再 加 一 点 点 特色 。 当 然 这 也 
需要 设计 师 在 具体 的 设计 中 不 断 实践 ， 总 结 出 新 的 观点 与 方法 ， 探 索 出 别具一格 的 引导 
页 设计 。 

(CE 界面 布局 的 基本 原则 


移动 APP 页 面 布局 是 在 设计 APP 界面 的 时 候 ， 最 主要 的 设计 任务 。 一 个 APP 的 好 与 
不 好 ， 很 大 部 分 取决 于 移动 APP 页 面 布局 的 合理 性 。 如 图 4-85 所 示 为 APP 最 原始 的 布 
局 模型 。 


旗 震 


出 边线 单 





图 4-85 APP 最 原始 的 布局 模型 
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如 图 4-86 所 示 为 移动 APP 


种 生 业 业 昌国 里 因 “全 


经 典 布 局 界面 。 


ss: 00% mk 





15:37 
天 忆 图 == 站 页 
A sd 
Ss * ete 2 
| 
| 灾后 商品 一 日 了 隔 
画 ” 故 z 四 和 旦 
器 主 外 十 1 
Fa 太吉 Pr PAil 
4-86 经 典 布局 界面 
页 面 布 局 , 顾名思义 就 是 对 页 面 的 文字 `、 图形 或 表格 进行 排 布 、 设 计 , 如 图 4-87 所 示 。 
优秀 的 布局 ， 需 要 对 页 面 信息 进行 完整 的 考虑 ， 既 要 考虑 用 户 需 求 、 用 户 行为 ， 也 要 考虑 
言 息 发 布 者 的 日 的 和 日 标 。 





4-87 页 面 布局 
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Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 


对 用 户 行为 的 迎合 和 引导 ， 有 一 些 既 有 原则 和 方法 ， 具 体 如 下 : 


QOOOOOOOOVO OOOO0OOOOOOOOOoO 


公司 / 组 织 的 图 标 (L060 ) 在 所 有 页 面 都 处 于 同一 位 置 。 

用 户 所 需 的 所 有 数据 内 容 均 按 先后 次 友 合 理 显 示 。 

所 有 的 重要 选项 都 要 在 主页 显示 。 

重要 条 目 要 始终 显示 。 

重要 条 目 要 显示 在 页 面 顶端 中 间 的 位 置 。 

必要 的 信息 要 一 直 显示 。 

消息 、 提 示 、 通 知 等 信息 均 出 现在 屏幕 上 目光 容易 找到 的 地 方 。 
确保 主页 看 起 来 像 主 页 (使 主页 有 别 于 其 他 二 三 级 页 面 ) 。 
主页 的 长 度 不 宜 过 长 。 

APP 的 导航 尽量 采用 底部 导航 的 方式 ， 菜 单数 目 以 4 ~ 5 个 为 最 佳 。 
每 个 APP 页 面 长 度 要 适当 。 

在 长 网 页 上 使 用 可 点 击 的 “内 容 列 表 ” 。 

专门 的 导航 页 面 要 短小 (避免 滚屏 ， 以 便 用 户 一 眼 能 浏览 到 所 有 的 导航 信息 ， 
有 全 局 观 ) 。 

优先 使 用 分 页 (而 非 滚屏 )， 

滚屏 不 宜 太 多 (最 长 4 个 整 屏 ). 

需要 仔细 阅读 理解 文字 时 ， 应 使 用 滚屏 (而 非 分 页 ) 。 

为 框架 提供 标题 。 

注意 主页 中 面板 的 宽度 。 

将 一 级 导航 放置 在 左 侧面 板 。 

避免 水 平 滚屏 。 

注意 文本 区 域 的 周围 是 否 有 足够 的 间隔 。 

注意 各 条 目 是 否 合理 地 分 类 于 各 逻辑 区 ， 并 运用 标题 将 各 区 域 进行 清晰 划分 。 





这 些 APP 界面 布局 原则 可 以 保证 页 面 在 布局 方面 最 基本 的 可 用 性 ， 非 常 适 合 APP 设 
计 新 手掌 握 。 





为 局 











Photoshop 热门 OpPp 类 型 设计 从 入 门 到 精通 


计 准 备 与 规划 


因为 要 设计 的 对 象 是 一 个 整体 ， 所 以 为 了 保证 设计 后 期 的 设计 
一 性 与 连贯 性 ， 在 设计 前 期 要 根据 设计 对 象 进 行 一 些 准备 ， 以 及 





进 1 而 顺 的 风格 规划 设计 。 


、 丙 司 索 材 准备 


本 实例 是 一 款 休闲 游戏 的 APP UI 设计 , 因此 根据 该 游戏 的 特点 及 消费 群体 , 在 设计 前 ， 
需要 在 互联 网 上 收集 一 些 卡通 形象 、 可 爱 的 扁平 化 装饰 物 等 素材 作为 人 参考, 如 图 5-1 所 示 ， 
并 且 在 后 期 的 设计 中 也 可 以 用 来 丰富 游戏 APP 界面 。 














信人 分 
图 5-1 参考 素材 





个 


CUP 界面 布局 规划 


作为 一 款 休 闲 游戏 的 APP 系列 界面 ， 根 据 游戏 本 身 的 特点 ， 需 要 设计 出 一 个 手机 游 
戏 启 动 界面 和 3 个 不 同 功能 的 单 屏 游戏 界面 。 根 据 游戏 APP UI 设计 规 泥 ， 在 设计 前 ， 先 
对 这 4 个 界面 进行 大 致 的 画面 布局 与 界面 分 隔 ， 具 体 如 图 5-2 所 示 。 





LOGO 形象 


mE 





游戏 名 称 


操作 按钮 





游戏 小 贴 士 





功能 按钮 一 国 
国 


开始 界面 加 载 界面 关卡 界面 


图 5-2 界面 布局 规划 


DR 确定 风格 与 配色 


本 实例 是 一 球 休 闲 游戏 ， 它 的 很 大 一 部 分 消费 者 群体 为 儿童 和 女性 ， 因 此 在 主 色调 的 


选择 上 ， 应 该 选 
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先 择 一 坚 较为 明亮 、 可 爱 、 活 泌 等 能 吸引 到 消费 者 的 颜色 。 所 以 ， 在 本 实例 








的 风格 与 配色 上 ， 主 要 以 监 色 和 绿色 为 主 ， 添 加 清 丈 的 场景 奈 纹 ， 以 避免 纯色 背景 形成 采 
板 的 感 营 ， 让 游戏 界面 能 够 更 加 有 趣 、 丰 富 ， 使 游戏 用 户 能 够 在 娱乐 中 心情 愉 怖 。 


界面 制作 


Dd 在 做 了 前 期 了 大 量 准备 工作 后 ， 即 可 开始 制作 这 款 休闲 游戏 的 
sw 各 个 界面 了 。 在 整个 游戏 界面 的 设计 中 ， 对 这 些 界 面 都 选取 了 类 似 
二 | 的 背景 和 底 纹 ， 统 一 而 简约 。 实 例 包括 一 个 启动 界面 ， 以 及 3 个 单 

屏 游戏 界面 ， 下 面 介绍 其 具体 的 制作 方法 。 


CE 游戏 启动 界面 


游戏 启动 界面 是 用 户 在 打开 程序 后 看 到 的 第 一 个 界面 , 同时 也 会 给 用 户 留 下 第 一 印象 ， 
因此 这 个 界面 的 设计 也 尤为 重要 ， 要 设计 成 简约 、 明 了 ， 能 够 吸引 到 用 户 的 界面 。 





YS 


设计 思路 





本 界面 首先 采用 了 半 透 明天 空 设 计 ， 抓 住 了 设计 的 轻松 感 ， 使 得 界面 干净 并 耐看 。 然 
后 通过 人 物 形 象 的 设计 绘 男 、 游 戏 主题 文字 的 添加 等 制造 出 独特 抢眼 的 感觉 ， 制 作 流程 如 
5-3 所 示 。 





O) MONKEV 
COMINGI! 





图 5-3 制作 流程 
ET 


知 识 点 “钢笔 亚 屋 ” N 渐变 填充 、 “椭圆 工具 ” 图 层 样式 
光盘 路 径 第 5 章 \5.2.1 游戏 启动 界面 









































LT 新 建 一 个 1136 x 640 像素 的 空 自 文档 并 填充 渐变 效果 ， 使 用 “钢笔 工具 ”绘制 
出 云 条 的 形状 ， 调 整 “ 不 透明 度 ” 为 75%， 如 图 5-4 所 示 。 
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于 汉 I ddv 羔 








Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 





O02 选择 “钢笔 工具 ”， 结 合 “ 椭 圆 工 具 ”， 绘 制 出 猴子 的 面部 及 耳 部 ， 效 果 如 图 


Ee 


5-4 背景 以 及 云 末 绘制 5-5 绘制 猴子 面部 及 耳 部 
ZJ 用 “ 自 定 形状 工具 ”绘制 出 一 个 五 角 星 形状 , 使 用 “直接 选择 工具 ”对 其 进行 变形 ， 
WD 然后 使 用 “椭圆 工具 ”和 “钢笔 工具 ”分 别 绘制 出 猴子 的 眼睛 、 头 发 和 嘴巴 ， 
如 图 5-6 所 示 。 








5-6 绘制 猴子 眼睛 、 头 发 及 嘴巴 


选择 “ 横 排 文字 工具 ”输入 “MONKEY”， 如 图 TY 加 

有 | | 提示 : 注意 工具 模式 

5-7 所 示 ， 并 为 其 添加 “斜面 和 浮雕 ”和 “投影 ” 的 调整 及 “填充 类 型 ” 

图 层 样式 ， 如 图 5-8 所 示 。 和 “ 描 边 类 型 ”的 切换 。 


READIMORE 
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5-7 输入 文字 


LO 添加 图 层 样式 后 的 文字 效果 如 图 5-9 所 示 。 使 用 “ 横 排 文字 工具 ”输入 “COMING1”， 
所 示 。 


S 


如 图 5-10 


5-9 文字 效果 


/人 给 “COMIN6!” 添 加 “斜面 和 浮雕” 和 “投影 ”图 层 样式 ， 如 图 5-11 所 示 。 此 














一 笠 面 和 浮 贿 





结构 
样式 人: 外 斜面 
方法 (Q): 平滑 M 
深度 D): ”100 % 
方向 : @@ 上 © 下 
大 小 四: 一 一 5 像素 
软化 (): C= 0 像素 


1- 结构 








[人 20 | 莘 
ww 日 回 站 
高 度 : 度 


光泽 等 高 线 : a 口 当 多 占 只 


高 光 模式 (H): 滤 色 -[ | 
不 透明 度 O): 一 zy 一 75  % 
阴影 模式 (A): 正片 又 底 ~ 国 国 
不 透明 度 (0): 二 = 75  % 
















投影 


















混合 模式 人 @): 正片 亚 底 

不 透明 度 D): 一 加 1% 
角度 :| 一 | 加 度 回合 用 全 局 (6) 
距离 {0): FS 党 吉 


扩展 (RY: SS 0 % 
大 小 (5): 2 一 = 5 像素 





























设置 为 默认 值 复位 为 默认 值 


5-8 添加 图 层 样式 





时 的 图 像 效 果 如 图 5-12 所 示 。 



























邓 随 4 
样式 (D): 外 斜面 
EC 混合 模式 人 6)， 正片 于 - 国 
深度 D) < 而 |% 不 透明 度 (0): 一 他 29  % 
人 角度 (A): | 击 一 度 同 使 用 全 局 光 (G) 
大 小: 一 一 5 信 素 ww 


软化 (F): SS 0 





像素 距离 0): 15 像素 












































阴影 扩展 RR): = 79 % 
角度 N): ~ 20 度 大 小 (5): CPP 0 像素 
ey 9 园 使 用 全 局 光 (G) 
高 度 : 30 度 一 品质 
4: | -| sin 等 言 线 [A 门 湖 乏 握 点 () 
高 光 模 式 (H): 源 色 ~ 加 
未 : 绍 a 0 0 
不 透明 度 O)， 一 一 75 % 杂 色 (N) 
阴影 模式 (A): 正片 到 底 ~ 国 国 同 图 层 控 空 投影 (U) 
不 透明 度 (O: 一 75 % 设置 为 默认 值 复位 为 默认 值 








设置 为 默认 值 复位 为 默认 值 











5-11 添加 图 层 样 式 




















图 层 控 空 投影 (U) 


设置 为 默认 值 夏 位 为 默认 值 





COMINGI! 


于 芭 IN ddV 状 洗 弦 


5-10 输入 文字 





图 5-12 图 像 效 果 
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人 
所 示 . 





MONKEY 
COMING! 


O©www.monkey is coming.com.cn. 


5-13 最 终 图 像 效 果 


(CI 小 残 开始 界面 


本 界面 是 游戏 的 开始 界面 ， 主 要 体现 了 游戏 的 整体 性 与 元 素 化 ， 所 以 在 颜色 方面 要 
考虑 到 整体 的 主 色调 ， 在 界面 中 要 设计 出 游戏 中 会 出 现 的 元 素 、 游 戏 的 人 物 等 并 合理 分 
割 男 面 。 


Ug 设 计 王 路 


在 启动 页 面 的 背景 上 加 上 瓜 纹 并 调整 “不 透明 度 ”， 使 用 “钢笔 工具 ”绘制 使 其 表现 
出 自由 活泼 、 不 生硬 的 轻松 感 ， 其 配色 也 和 游戏 的 整体 视觉 相 结合 ， 增 强 设 计 的 统一 感 ， 
最 后 利用 各 种 图 层 样式 的 添加 制作 指示 牌 ， 如 图 5-14 所 示 为 制作 流程 。 








图 5-14 制作 流程 
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/制作 步骤 


知识 点 “钢笔 工具 ” 、 剪 贴 蒙 版 、 文 字 变形 、 图 层 样 式 
光盘 路 径 第 5 章 \5.2.2 游戏 开始 界面 


OF 新 建 一 个 1136 x 640 像素 的 空白 文档 ， 并 填充 渐变 效果 ， 如 图 5-15 所 示 。 双 击 
1 有 证 = 将 其 转换 为 HI a 0D” | 为 “图 层 (7 添加 “图 人生 登 加 ” 图 层 样 
式 ， 如 图 5-16 所 示 ， 制 作 界 面 底 纹 背 最 。 












































图 案 到 加 
图 案 
混合 模式 (6): 正片 县 底 a 中 
不 透明 度 (Y): 人 画 |% 本 
图 案 : i 辕 |[ 贴 紧 原点 (A) Y 
1 
缩放 (5): = 100  % 戏 
习 与 图 层 贬 接 (0 
设置 为 默认 值 | | 复位 为 默认 值 oe 
CC 
设 
村 


图 5-15 渐变 填充 5-16 制作 界面 底 纹 背景 


LA 选择 “钢笔 工具 ” | 设置 1 借 臣 | 为 <“ 路径” | “填充 ” 为 es 5 | 在 画布 
一 中 绘制 出 山 丘 形状 ， 如 图 5-17 所 示 ， 然 后 为 山 丘 添加 “图 生 党 加 ”图 层 样 式 ， 


图 像 效果 如 图 5-18 所 示 。 








图 案 到 加 - 
-图案 
混合 模式 (E)， 正片 杰 底 ~ 


址 透明 度 (。 下 |% 




















Sm 


司 | 贴 基 原点 (A) 





缩放 全 一 一 100 的 
台 | 与 图 层 链接 的 














芒 置 为 默认 值 屋 位 为 默认 值 














图 5-17 渐变 填充 图 5-18 添加 图 层 样 式 和 图 像 效 果 





WA 





D 热门 做 PP 类 型 设计 从 入 门 到 精通 





BD NE a a 
,WA i 
OA 继 芝 恒生 
的 形状 绘制 出 马路 ， 如 图 5-20 所 示 。 





zall 全 司 吕 2 







不 透明 度 : | 
加 四 





鲁 ”全 
图 线性 本 入) 晤 
缩 广 : % [ 呵 与 图 层 对 齐 








图 5-19 导入 素材 图 片 并 编辑 图 5-20 路 面 的 绘制 
LO 使 用 “钢笔 工具 ”在 画布 中 绘制 出 树干 ， 以 及 树枝 的 形状 (设置 形状 “填充 ” 
S| 0 | DNB a | | el a | St Ni D2 Dl rt i, 
LO 接着 使 用 “椭圆 工具 ”， 设 置 形 状 “填充 ”类 型 为 “渐变 ”， 画 出 多 个 “ 树 球 ” 
CC 部分 代表 树叶 ， 并 建 组 为 “ 树 球 ”， 如 图 5-22 所 示 ， 


图 像 耻 图 层 山 类 型 六 ) 





加 线性 二 Cc) 是 
缩 误 : % [Vi| 与 图 层 对 齐 


图 5-21 绘制 树枝 5-22 绘制 “ 树 球 ” 





1 72 








0 全 将 “ 树 球 ” 中 的 形状 进行 “ 栅 格 化 ”图 层 ， 并 在 “画笔 预 设 ”管理 器 中 选择 合 
J 适 的 笔画 ， 调 整 参数 ， 给 “ 树 球 ” 增 添 效果 ， 如 图 5-23 所 示 。 
人 O 〇 9 将 所 有 树 球 和 树枝 建 组 并 将 组 命名 为 “ 树 1”， 按 Ctrl+]J 组 合 键 复制 组 ， 移 动 
并 调整 大 小 ， 之 后 修改 树干 颜色 ， 得 到 另外 两 棵 树 ， 同 时 按照 绘制 山 丘 的 方法 
绘制 出 另外 两 个 山 自 ， 如 图 5-24 所 示 。 


画笔 【二 等 项 渤 一 















































一 神 毛 刷 品 质 
形 大 :| 平生 形 : 
硬 毛 刷 : zs 一 一 [28% | 
JS | 
:Bs% | 
一 sx | 
一 一 




















一 外 














图 5-23 增添 效果 图 5-24 复制 图 层 
O09 选择 “ 自 定形 状 工具 ”, 设置 “形状 ” 为 “ 花 1”, 在“ 树 12? 图 层 上 拖 出 花 条 形状 ， 
WA 设置 颜色 ,打开 “图 层 样 式 ”对 话 框 ,设置 “投影 ”图 层 样 式 ， 如 图 5-25 所 示 ， 
单 击 该 图 层 ， 按 Ctr1+]J 组 合 键 复 制图 层 ， 修 改 颜 色 并 移动 至 合适 的 位 置 ， 如 图 5-26 所 示 。 
按 Shift 键 ， 将 所 有 花 条 形状 建 组 ， 并 将 组 命名 为 “ 花 条 ”.， 
10) 设置 “钢笔 工具 ”的 模式 为 “形状 ”， 并 设置 颜色 和 描 边 ， 在 画布 中 ， 绘 制 出 
/ 单 支 香蕉 的 形状 ， 依 次 按 Ctrl+J 及 Ctrl+T 组 合 键 复制 、 移 动 并 调整 香蕉 的 位 
置 和 大 小 ， 绘 制 出 香蕉 的 整个 形状 ， 如 图 5-27 所 示 。 


一 投影 
一 结构 - 
混合 模式 (6): 正片 琶 底 | 
不 透明 度 (0): 79 一 80  % 


角度 :人 | ) 区 度 团 使 用 全 局 (6) 


于 汉 IN ddV 灯 洋 汶 ， 














距离 0): 一 一 0 像素 
扩展 R): 一 0 
大 小 GS): /一 3 像素 




















图 层 控 空 投影 (U) 
设置 为 默认 值 夏 位 为 默认 值 




















图 5-25 设置 “投影 ”图 层 样式 图 5-26 复制 并 修改 图 5-27 香蕉 的 绘制 





BF 








Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 





使 用 “和 矩形 工具 ”， 在 设置 “路 径 操 作 ” 下 拉 列 表 中 选择 “合并 形状 ”选项 ， 


/7 
绘制 出 房屋 的 窗户 ， 结 合 “ 钢 笔 工 具 ” 绘 制 房 屋 的 屋顶 与 大 门 形状 、 房 顶 瓦 片 
的 形状 ， 完 成 房屋 的 绘制 ， 其 他 房屋 也 以 同样 的 方法 绘制 出 来 ， 如 图 5-28 所 示 。 
7 pp/ 单 击 “ 钢 笔 工具 ”， 选 择 工具 模式 为 “形状 ”， 在 画布 中 合适 的 位 置 依次 绘制 
ee 出 栅栏 的 形状 ， 如 图 5-29 所 示 。 





5-28 绘制 房屋 5-29 绘制 栅栏 

A 人 使 用 “ 圆 角 短 形 工具 ”绘制 出 形状 后 用 “直接 选择 工具 ”进行 调整 ， 绘 制 出 蘑 
/ ”站 的 根 芋 . 

A 使 用 “多 边 形 工具 ”， 在 选项 栏 中 设置 “ 边 数 ”为 3， 选 中 “平滑 扬 角 ” 复 选 框 ， 
1A 如 图 5-30 所 示 。 

pg 绘制 出 蘑菇 盖 ， 为 其 添加 “投影 ”图 层 样式 ， 如 图 5-31 所 示 。 最 后 使 用 “椭圆 
/DD 工具 ”并 使 用 剪贴 蒙 版 绘制 芯 奖 盖 纹 理 , 复制 出 另外 一 个 蘑 奖 并 移动 调整 其 位 置 ， 

如 图 5-32 所 示 ， 





一 投影 
一 结构 


混合 模式 (6): 颜色 加 深 ~ 国 国 

不 透明 度 D): 一 中 % 
角度 内 :( 上 )】 50 。 度 回 使 用 全 局 光 (G) 
距离 D): 一 5 ”像素 


扩展 (R): Ce 0 % 
大 小 G@): Bm | 5 像素 











闲 | 边 : 世相 













一 品质 





Yi 平 肯 拐角 
性 形 

清 进 过 依据 : 
平 骨 多 进 


等 高 线 : [A 站 消除 锯 占 
丸 色 (N): CS 0 % 


图 层 控 空投 影 (U) 
设置 为 默认 值 和 夏 位 为 默认 值 































5-30 设置 参数 5-31 添加 “投影 ”图 层 样 式 5-32 绘制 蘑 娩 
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17 万 使 用 “钢笔 工具 ”在 画布 中 绘制 出 指示 牌 木 桩 的 轮 廊 ， 继 续 使 用 “钢笔 工具 ”， 
CC 设置 相同 的 “填充 颜色， 改变 图 层 的 “不 透明 度 。， 分 别 为 65 和 和 35%， 给 
制 出 木 柱 的 阴影 面 ， 如 图 5-33 所 示 。 











Er 了 Wn dr Nn 
人 
吉 《 = 7 和 ow 本 

| 有: “A. ys Cas as Ber J PY Mey py eat < fr PP 


和 了 和 
本 本 Bab 





一 外 


5-33 绘制 木 桩 


7 一 使 用 “钢笔 工具 ”绘制 出 指示 牌 的 底板 ， 命 名 为 “ 底 色 1”， 如 图 5-34 所 示 。 
添加 “投影 ”图 层 样式 ， 参 数 设置 如 图 5-35 所 示 。 





平移 1n ddVv 冰 汽 汶 昌 


~ vi a a tl i er es 二 
1 Ph Ce i We Wp 2 0 WP 上 
| -es 二 关 hm A Np 
nr = as 人 We nr WE ,i A > 
. 和 和 本 a ww 
Pm wa s ye 和 RE 
> . . da ， i | 
J - 本 - Ww -地 全 下 S 可 i ' 

















浊 侣 模式 (8): 蛙 性 加 深 ~ 国 国 
不 放 明 度 (0): 国志 











二 


角度 (A): | 上 50 度 回 使 用 全 局 光 () 




















距 高 各 :一 3 盆 索 
扩展 RR): 是 0 | 区 
二/ (5): ms 1 像素 


等 言 线 : | 1 器 沽 俐 昌 占 由 


求 色 的 :0 % 


图 后 控 空 控 影 岂 
保 赴 为 圭 纹 值 县 位 为 圭 纹 值 


图 5-34 绘制 指示 牌 底板 图 5-35 添加 图 层 样 式 
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Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 









7 人 添加 完 图 层 样式 后 的 图 像 效 果 如 图 5-36 所 示 。 复 制图 层 “ 底 色 1” 并 调整 大 小 
和 修改 颜色 ， 命 名 为 “ 底 色 2”， 再 删除 “投影 ”样式 ， 此 时 如 图 5-37 所 示 。 


要 Ws - 加 要 
四 
< > 
bs 2 | 
” . . . - . 4 
' 四 局 
a s 


WE 





图 5-36 图 像 效果 图 5-37 复制 编辑 图 层 


70 绘 “ 底 色 2” 添 加 “内 阴影 ”和 “渐变 膨 加 ”图 层 样 式 ， 如 图 5-38 所 示 。 
AN 






































内 阴影 
结构 
混合 模式 (6): 正片 要 底 ~ 国 国 
不 透明 度 (0): 一 > 史 靳 变 杰 加 
角度 :站 | ) 30 ” 度 回 使 有 全 局 光 () us ee 加 
己基 人 混 侣 模式 (@)， 柔 光 ~ 由 | 信 色 
外 REG | 、 cm 
距 壤 亿 ) - 不 透明 度 P): 一 一 一 0 % 











阻塞 (QO: 一 一 = 25 % 
tx IE 口 Ra 
样式 :线性 -~ 辐 与 图 层 对 章 四 





前 度 人 N): (ey ) 90 度 
御用) 二 一 一 100  % 
误 置 为 点 让 值 复位 为 默认 值 


























保 直 为 条 恋 值 县 位 为 未 伙 值 











5-38 添加 图 层 样 式 
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和 
一 【人 后 的 图 像 效 果 如 图 5-40 所 示 。 





混合 模式 (6): 正片 又 底 ~ 大 天 
不 透明 度 (0): el00  % 


用 度 (A): ( | 】 30 ” 度 [| 使 用 全 局 光 避 ) 
中 高 人 D0): 下 一 2 慨 素 
扩展 Rj: 一 0 号 

太 小 后 : 本 3 者 素 
































图 层 控 空 授 影 人) 


信 站 为 类 雍 值 野 位 为 赫 示 值 


图 5-39 添加 图 层 样 式 图 5-40 图 像 效果 











Wn a a a a ea a 
ee 上 绘制 出 多 个 形状 ， 命 名 为 “ 底 纹 1” 并 创建 剪贴 莹 版 ， 如 图 5-41 所 示 。 

汽 消 在 “ 底 纹 1” 的 基础 上 使 用 “钢笔 工具 ”并 结合 剪贴 蒙 版 ， 依 次 绘制 出 指示 牌 
一 em 的 高 光 、 亮 部 及 暗部 ， 如 图 5-42 所 示 。 


et 





图 5-41 绘制 底 纹 图 5-42 绘制 亮 暗 音 
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4 


平移 1n ddVv 冰 汽 汶 昌 














Photosho 热门 鲍 PP 类 型 设计 从 入 门 到 到 精通 





jp WE 合用 嘻 拓 证 全 全 指示 全 是 民 克 广 尝 全局 用 国 放 晤 3 未 下 让 十 二 
“投影 ”图 层 样 式 ， 此 时 的 文字 效果 如 图 5-44 所 示 。 


图 5-43 添加 文字 信息 
站 图 呈 由 和民 ES 


2 


将 其 拖 到 当前 图 像 文 件 中 ， 











投影 
和 一 结构 





混合 模式 (6)， 正常 -i 
不 透明 度 (0): 一 一 7 一 % 





中 高 人 D): , 信 - 
扩展 RR): 一 py 100  % 
太 小 全 ): 本 ——— 中 


负 度 A: [ 上】 55。 度 门 合用 全 局 (9) 
外表 


























控 空 授 影 帅 ) 


加 图 局 


”设置 为 默认 值 | | 复位 为 默认 值 ， 








按照 “1” 的 绘制 方法 ， 绘 制 出 另外 两 个 指示 牌 ,打开 “小 黄 
调整 大 小 及 位 置 ， 如 图 5-46 所 示 。 















































































































































_ 曙 了 二 指 趟 牌 | 
外 3 
一 | 
© 工 ， 本 " 
各 Ee 
| :| 三 
rs 
全 撒 浆 1 
Eee a | 
和 辣 底 色 > 产 ™ 
| | 
过 加 喇 底 色 1 产 
图 5-45 图 层 建 组 由 | 
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图 5-44 文字 效果 


如 图 5-45 所 示 。 
鸡 .ai” 素 材 文件 ， 


图 5-46 绘制 指示 牌 ， 丰 富 界 面 





2 使 用 “钢笔 工具 ”结合 “ 自 定形 状 工具 ”， 绘 制 出 小 猴子 的 形态 ， 并 调整 其 位 


置 及 大 小 ， 如 图 5-47 所 示 。 
/人 将 制作 的 游戏 启动 界面 文档 中 的 云 东 元素 复 制 到 本 文档 中 , 调整 其 “不 透明 度 ” 
se O 为 100%。 单 击 “ 椭 圆 工 具 ”, 设置 颜色 , 绘制 出 云 条 的 眼睛 及 肋 红 , 继续 使 用 “ 钢 
笔 工具 ”绘制 出 云 条 的 嘴巴 ， 如 图 5-48 所 示 。 





图 5-47 绘制 小 猴子 图 5-48 绘制 云 采 
2 网 依照 绘制 指示 牌 的 方法 和 步 又， 绘制 出 “帮助 ”和 “商店 ”按钮 图 标 ， 如 图 5-49 
Fes 了 





图 5-49 绘制 按钮 图 标 


BA 








于 芭 IN ddV 状 洗 弦 











全 使 用 “ 民 排 文字 工具 ”， 在 画布 中 输入 标题 文字 ， 如 图 5-50 所 示 。 单 击 “创建 





5-50 绘制 标题 文字 


给 标题 文字 图 层 添 加 





文字 灾 形 ?各 则 妆 形 区 等 吕 用 图 吃 汪 所 示 ， 





样式 (5): 合 花冠 v | 


图 水 平 (H) ”名 垂直 (V) 
弯曲 (B): +40 % 
Ty 
水 平 扭曲 (0): 0 % 
人 
王 直 扭曲 (E): 0 % 
yy 











图 5-51 变形 文字 





“ 描 边 ”和 “内 阴影 ”图 层 样式 并 调整 参数 值 ， 此 时 的 图 
-一 AL 像 效果 如 图 5-52 所 示 ， 








一 描 边 





结构 


- 内 阴影 - 





结构 








六 小 :Eee 6 像素 
位 置 p): 外 部 了 

温 合 模式 (6): 正常 ” 

不 透明 度 (0): = 100 % 











填充 类 型 (F)， 渐变 ~ 


:| D&S 
样式 0: 线性 ~ 加 与 图 层 对 齐 (6) 


角度 Ai:( "0 度 加 人 
缩放 (CO): 一 一 一 + 一 一 100  % 











混合 模式 @): 正片 到 底 ~ 图 国 
不 透明 度 (0): 一 一 51  % 











阳 塞 (CC 0 % 





角度 (N: ( | ) 50。 度 器 使 用 全 局 光 人 9) 
中 高 5 一 一 一 5 像素 


大 /| M5): 2 | 5 像素 








等 高 线 : 加 器 清 逐 据点 人 


杂 色 全 ): (P= 0 oo 











设置 为 默认 值 复位 为 默认 值 











设置 为 默认 值 复位 为 默认 值 











o0) 
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图 5-52 添加 图 层 样式 


SS 


给 标题 文字 图 层 添 加 “渐变 县 加 ”和 “投影 ”图 层 样 式 并 调整 参数 值 ， 此 时 的 
图 像 效 果 如 图 5-53 所 示 。 


SS 








投影 
结构 - 

















混合 模式 (6): 颜色 加 深 ~ 国 国 
不 透明 度 (0): 一 2 一 一 36  % 
We 角度 :| | 90 。 度 回 使 用 全 局 光 人 
_ 源 变 > 








距离 DO): 一 一 一 5 像素 
扩展 R): 二 py 100  % 
大 小 3): 攻 > 5 像素 


温 合 模式 (0): 柔 光 v 回访 色 
不 透明 度 (P): SD 100 % 


洒 朗 :1 | 吕 反 ) 





























样式 0， 线性 ~ 同 与 图 层 对 齐 四 
高 绪 : [4 问 湖 有 据 具 (0) 
角度 (N): 王 ) 180 度 
杂 色 N: 一 0 % 
E i 一 一 — — -一 一 -一 一 一 
缩放 (5): 100 有 加 图 层 控 空 投影 (J) 














设置 为 默认 值 夏 位 为 默认 值 设置 为 默认 值 和 夏 位 为 默认 值 





5-53 添加 图 层 样 式 


7) phi 后 将 之 前 绘制 的 “蘑菇 ”图 层 复 制 一 个 ， 并 放置 到 合适 位 置 ， 最 终 的 图 像 效 
采 如 图 5-54 所 示 。 


一 外 


乎 下 In ddyYV 业 活 产 





图 5-54 最 终 图 像 效果 


QIEER 游戏 加 载 界面 


在 游戏 过 程 中 , 游戏 加 载 界 面 毋 良 置疑 是 必须 存在 并 设计 的 。 当 进入 游戏 加 载 界 面 时 ， 
al 的 漂亮 的 界面 设计 是 否 能 吸引 到 你 ， 以 及 所 看 到 的 信息 是 否 对 你 有 帮 
助 ,这 些 都 是 在 设计 此 界面 时 应 该 考虑 到 的 问题 。 
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Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 


“设计 思路 








度 条 的 细节 部 分 ， 添 加 文字 信息 后 进行 
的 提示 框 ， 增 加 与 用 户 的 交互 ' 





提取 之 前 设计 的 游戏 开始 界面 文档 中 的 部 分 元 素 作为 此 界面 的 奈 纹 背景 ， 这 样 不 仅 可 
以 增加 设计 的 连贯 性 ， 而 且 还 可 以 使 得 画面 不 单调 ;接着 通过 “钢笔 工具 ”绘制 出 加 载 进 





5-55 制作 流程 


富 / 制 作 步 又 


细 广 调整 ， 





最 后 使 用 “ 圆 角 和 矩形 工具 ”绘制 出 游戏 
生 ， 其 制作 流程 如 图 5-55 所 示 。 


开始 游戏 时 介 用 特 次 工具 更 容易 过 关 哟 ) 











(7 














知识 点 “钢笔 工具 ”“ 圆 角 和 矩形 开具”、 图 层 样式 
光盘 路 径 第 2 章 \2.1.1 简单 形状 \1. 椭圆 


新 建 一 个 1136 x 640 像素 的 空白 文档 ， 将 制作 的 游戏 开始 界面 文档 中 的 部 分 
素 复 制 到 本 文档 中 ， 调 整 其 “不 透明 度 ”: 


元 
“ 树 ” 区 5S 0%、 Ts 多 $55%、 “ 马 


路 ”为 65%、“ 云 有 条” 和 “背景 ”为 7$%， 制 作成 新 的 背景 ， 如 图 5-56 所 示 。 
0 使 用 “钢笔 工具 ”绘制 出 加 载 进度 条 的 底 框 ， 接 着 添加 “内 阴影 ”图 层 样式 并 
ee-_Ge 设置 相关 参数 ， 如 图 5-57 所 示 。 
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图 5-56 界面 背景 




















内 阴影 
混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): nD |% 


角度 和 :| ，】 区 度 站 合用 全 局) 
中 高 Dj: 一 一 了 你 
阻塞 (0): = 25  % 





大 小 5): 一 一 一 一 3 像素 
一 局 所 
:| S| Di 
BN: 0 4% 





设置 为 默认 什 复位 为 默认 值 








图 5-57 绘制 加 载 进度 条 底 框 





A) 接着 给 游戏 加 载 进 度 条 的 底 框 添加 “渐变 营 加 ”图 层 样 式 并 设置 相关 参数 ， 此 
时 图 像 效 果 如 图 5-58 所 示 。 复 制 加 载 进度 条 并 调整 大 小 ,绘制 出 进度 条 的 凹 模 
wo SO 二 








新 变 亚 加 
一 新 变 
混合 模式 (o): 柔 光 ~ 回 仿 色 
不 透明 度 pD): 一 一 一 一 国 % 

淅 六: [| 癌 反 向 mW) 


样式 D: 线性 ~ 财 与 图 层 对 齐 () 
角度 :| wy ww 谋 
缩放 (全 ): 一 一 一 100  % 


设置 为 默认 值 复位 为 默认 值 























5-58 添加 图 层 样式 5-59 绘制 加 载 进 度 条 四 模 
OA 给 其 目 槽 添加 “内 阴影 ”和 “渐变 坪 加 ”图 层 样式 ， 此 时 的 图 像 效 果 如 图 5-60 
jo 
内 阴影 
一 辣 构 
混合 模式 人 @): 线性 加 - Ey 











趟 透明 度 人 和) 驴 








A 渐变 琶 加 
角度 名 ): 加 30 ” 度 回合 用 全 局 党 避 ) _ 新 变 
距离 (D0): ce 一 = 1 像素 混合 模式 (0): 柔 光 回访 色 





不 透明 度 (P): 呈 人 J 了 ?一 一 一 % 
渐变 : 团 反 向 (R) 
样式 (L): 线性 ”J 与 图 层 对 齐 们 ) 


角度 (N): | wp 90 讼 
缩放 (5S): 一 > 100 % 


设置 为 默认 值 和 夏 位 为 默认 值 


阻塞 从 }: 25 号 
大 小 加 Pe 一 所 恤 雪 


等 训 线 ; [ee 丫 消 了 从句 占 员 


六 色 (NN): f= 0 Dh 


保 殖 为 喜 训 秆 县 位 为 默 记 值 























5-60 添加 图 层 样式 及 图 像 效 果 


0 大 使 用 “钢笔 工具 ”绘制 出 进度 显示 条 ， 如 图 5-61 所 示 。 添 加 “斜面 和 浮雕 ”及 
VY “内 阴影 ”图 层 样式 并 设置 其 参数 ， 如 图 5-62 所 示 。 



























































一 斜面 和 泽 随 
结构 | 
en 国 混合 模式 (6): 正片 县 底 ~ 国 
法 (Q@): 平 ; ” = 
区 re AQ/ TT 
a ,。 | | 不 通明 度 (0): 一 o% 
A:@ OF 角度 (A): | 1 | -90 ” 度 回 使 有 全 局 光 (G) 
大 小 人 :一 25 | 像素 >、T2 
一 阴影 阻塞 (C0): C= 一 一 = 0 % 
角度 (VD): FE 度 大 小 5): TT 一 一 10 像素 
”/ 口 使 用 全 局 光 (@) 一 
= dy 等 高 线 :| -| 口 消 $ 饥 上 (， 
高 光 模 式 (WD 要 加 ~[ 本 
= 可、 : 
不 透明 度 Oj: 一 yy 一 5” % 杂 色 (N): G 0  % 
阴影 模式 的 : 要 加 -mm 设置 为 默认 值 | | 复位 为 默认 什 
不 透明 度 (QO: (= 0 % 

















图 5-61 绘制 进度 显示 条 图 5-62 添加 并 调整 图 层 样 式 
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于 汉 IN ddV 灯 洋 汶 ， 

















- 结构 





混合 模式 人 @): 正常 
不 透明 度 (D): 一 一 人 100 9 
杂 色 IC 0 % 


so 国 oO 








如 
- 图 素 





方法 (Q): 柔和 ~ 

源 :器 居中 全 轿 边 缚 (G) 
阻塞 (0): CT 0 % 
大 小 5): 一 一 5 像素 














等 高 线 : [4 口 消 聊 锯 占 D 


范围 R): 一 一 一 一 > 50 9 
抖动 0): C= 0 % 














设置 为 默认 值 复位 为 默认 值 








渐变 县 加 
渐变 
混合 模式 fo) 和 柔 光 ~ 辣 访 色 
不 透明 度 人 P): 二 一 0  % 
区 : | 站 反射 () 
样式 (): 线性 ~ ” 团 与 图 层 对 齐 们 














uN ‘Mn 孚 
前 度 们 ) \ | 90 度 


闹 衣 加) 一 


谋 置 为 默认 值 县 位 为 点 让 值 





Or 使 用 “ 横 排 文 
字 工 具 ” 输 入 
文字 信息 ， 为 其 添加 “ 描 


边 ; 图 层 样 式 ，| 如 图 5564 
所 示 。 


人 接着 添加 “ 投 
影 ” 图 层 样 式 ， 
此 时 的 图 像 效 果 如 图 5-65 
所 示 。 
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5-63 添加 图 层 样式 及 图 像 效果 





措 边 
qq | 结构 
大 小 9): 一 一 3 像素 
位 置 P): 外 部 
混合 模式 (6): 正常 ~ 


不 透明 度 (0): 10  %% 











证 在 全 和. 
Se | 一 关 





保罗 为 点 让 值 县 位 为 默 训 值 














图 5-64 输入 文字 并 添加 图 层 样式 





投影 
| 结构 
混合 模式 (6): 线性 加 浴 | 
不 透明 度 (D): 一 一 一 60  % 


角度: ( 加。 度 回 使 用 全 局 光 (G) 


距离 (D0): Te 5 像素 
扩展 R): se 100  % 
大 小 (5): Ce |] 像素 


等 高 线 : PF 器 湖 条 据 上 (0) 


杂 色 (N): Cs (0 % 


图 层 控 空投 影 (U) 
设置 为 默认 值 夏 位 为 默认 值 









































图 5-65 添加 图 层 样式 及 图 像 效果 





RW | 和 

WA 形 工具 ”绘制 
ME 
D3 A OU ES 00 
a be 
文字 图 层 ， 移 动 到 框 中 后 
修改 文字 信息 并 调整 字体 
的 大 小 ,如 图 5-67 所 示 。 


必 始 游戏 时 间 用 特效 工具 更 容易 过 关 网 ) 


5-66 绘制 游戏 提示 框 5-67 编辑 文字 信息 





(CI 卫 游戏 关卡 界面 


在 现 阶段 的 市 场 中 ， 游 戏 的 设计 可 谓 是 日 新 月 异 ， 只 有 不 断 地 改进 才能 在 市 场 中 脱 锻 
而 出 。 对 于 游戏 天 卡 的 设计 在 现 阶 段 大 概 分 为 两 种 : 全 屏 场景 天 卡 设计 和 指向 型 关卡 框 ， 
本 实例 将 会 制作 一 个 指向 型 关卡 框 界面 。 


设计 思路 


仍然 是 提取 之 前 设计 的 游戏 开始 界面 中 的 部 分 元 素 作为 此 界面 的 底 纹 背景 ; 接着 通过 
“钢笔 工具 ”和 “椭圆 工具 ”结合 剪贴 蒙 版 绘制 出 关卡 框 及 标题 栏 ， 丰 富 细节 ， 使 界面 看 
起 来 可 爱 、 和 生动 ， 最 后 绘制 游戏 的 人 物 形象 并 将 其 放 入 到 界面 中 来 增加 画面 的 趣味 ， 制 作 
流程 如 图 5-68 所 示 。 





图 图 图 
图 图 全 晴 


三 业 全 | bd 六 





图 5-68 制作 流程 
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[| 
类 
记 
J 
如 
= 
设 
1 








Photoshop 热门 伸 PP 类 型 设计 从 入 门 到 精通 


制作 步骤 


知识 点 “钢笔 工具 ”“ 圆 角 和 矩形 工具 ”、 图 层 样 式 
光盘 路 径 第 5 章 \5.2.4 游戏 关卡 界面 
































(7 1 新 建 一 个 1136 x 640 像素 的 空白 文档 ， 将 制作 的 游戏 加 载 界面 文档 中 的 部 分 元 
素 复 制 到 本 文档 中 ， 制 作成 新 的 背景 ， 如 图 5-69 所 示 。 使 用 “ 圆 角 和 矩形 工具 ” 
会 制 底 框 并 添加 “内 阴影 “图 层 样式 ， 如 图 5-70 所 示 。 


pe 
% 
保 置 为 默读 值 县 位 为 喜 训 值 


结构 . 
图 5-69 绘制 背景 图 5-70 绘制 关卡 底 框 


混合 模式 (6): 正常 ~ 故国 
Oz2 ， 接着 给 底 框 添加 “内 发 光 ” 图 层 样 式 ， 此 时 的 图 像 效果 如 图 5-71 所 示 。 


























不 透明 度 人 0)， 一 驴 
角度 (A): ( 1 )】-50 度 回 使 用 全 局 光 人 ) 


明 
We 


中 高 (0): 全 1 像素 


阻塞 (C): = 一， 25 % 


大 小 BB): 一 3 慢 索 




























































































结构 
:长 吝 模 陈 介 ): 亚 加 ™ 
不 透明 度 (0): 一 一 75  % 
来 双全 :CT 0 0 
J 本 | 
一 图 素 一 








方法 名: 订 和 ™ 

章 : 司 居中 但 夯 边 毕 扣 ) 
阻塞 (C): 车 0 区 
大 小 加 了 7 慢 素 












































一 品质 
J Osi 


范围 Rj: 一 一 一 50  % 
拉动 0D: /一 熏 0 驴 


了 责 为 对 从 值 景 位 为 默认 值 
































图 5-71 添加 图 层 样 式 及 图 像 效 果 
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DI? 继续 使 用 “钢笔 工具 ”绘制 出 关卡 框 面板 ， 给 其 添加 “内 阴影 ”图 层 样 式 ， 如 
| 





内 阴影 
结构 


混合 模式 (6) 正片 县 底 ~ Ol 
不 透明 度 (0): 一 一 天 % 
角度 (A): | -30 。 度 门 使 用 全 局 光 人 


距离 0): (一 1 像素 
阻塞 (0): < 0 % 
大 小 G): 一 y= 125 像素 


等 高 线 : [4 回 湾 逐 据 齿 (0) 


杂 色 (NI CC 0 % 


设置 为 默认 值 复位 为 默认 值 




















品质 


























5-72 绘制 关卡 框 及 添加 图 层 样式 
0 接着 在 上 一 基础 上 给 关卡 框 面板 添加 “投影 ”图 层 样 式 ， 并 调整 其 参数 值 ， 此 
时 的 图 像 效 果 如 图 5-73 所 示 。 





投影 
结构 

混合 模式 (6)， 线 性 加 深 ~ 国 国 

不 透明 度 (D):， = 25  % 
角度 (9: | | -50 度 回 使 有 全 局 光 (G) 

BS 1 
扩展 R): = Z ”25 % 
大 小 9): A 二 一 3 ”像素 
































_ 品质 
等 高 线 : Pe 口 注 和 所 具 QD 
永 色 (NI (一 0 % 


团 图 层 控 空 投影 ) 
设置 为 默认 值 | [ 复位 为 默认 值 

















图 5-73 添加 图 层 样式 及 图 像 效果 


LO 使 用 “ 圆 角 珑 形 工具 ”绘制 并 调整 出 关卡 1 的 底 框 ， 然 后 添加 “投影 ”图 层 样 式 ， 
J) 此 时 的 图 像 效 采 如 图 5-74 所 示 。 


投影 
闫 构 
总 全 模 式 B: 下 FEE ”六 


角度 (A): (! 0 麻 回 使 用 全 局 光 (G) 
扩展 要] 和 0 oe 
大 小 引 :， 鳃 可 恤 妻 


等 襄 线 : 到 上 癌 消 人 的 占 虽 


好 色 八 ): es 号 而 


图 层 控 空 探 时 LL) 
保定 为 听 计 值 景 位 为 于 也 值 


"本 

















5-74 绘制 关卡 1 底 框 及 添加 图 层 样 式 


ES 








于 芭 IN ddV 尊 沪 评 











Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 





LO 接着 使 用 “ 圆 角 短 形 工具 ”绘制 出 关卡 1 的 面板 并 添加 “内 阴影 ”图 层 样 式 ， 
区 人 人 


内 阴影 ; 
一 某 构 
混合 模式 (6): 正常 ~ 国 
人 一 一 一 a 
前 度 (A): NT -0 ” 度 加 使 用 全 局 光 如 ) 
大 小 人 G1: 像素 


等 言 线 : [4 器 沽 条 占 0 


杂 色 IN)': =” 0 % 
设置 为 默认 值 复位 沟 默 认 值 











一 品质 














5-75 绘制 关卡 1 的 面板 及 添加 图 层 样式 
合 加 ”和 “投影 ”图 层 样式 ， 此 时 的 图 像 效 果 如 图 5-76 所 示 。 


0 网 继续 添加 “渐变 重 












































投影 
_ 结构 
混合 模式 (6): 正片 释 底 ~ 加 是 
不 透明 度 (0): 一 ys 一 一 50  % 
新 变 和 加 角度 (A): (1) 50 度 回 使 有 全 局 光 (G) 
渐变 一 距离 DO): /一 2 像素 
混合 模式 (0): 和 邓 尖 -| 回 仿 色 扩展 R): 一 0 % 
不 透明 度 P): 一 加 ”|% 大 小 5): 5 一 4 ”像素 
区 : |v| 门 反 向 R) 一 
样式 ()， 线性 ~ 贱 与 图 层 对 齐 (0) 
a #8: | S| Ostatt 
角度 MW: 上 |50 一度 
D4 杂 色 人 N): CS 0 % 
编 抽 8): 一 一 一 100 % 
同 图 层 控 空 投影 (J) 
设置 为 默认 值 | [ 复位 为 默认 什 设置 为 默认 值 | [ 捍 位 为 默认 值 











5-76 添加 图 层 样式 及 图 像 效果 


人 使 用 “ 横 排 文字 工具 ”添加 数字 “1”， 同 时 添加 “投影 ”图 层 样式 ， 如 图 














上 
投影 
结构 
混合 模式 (6): ~ 国 国 





不 透明 度 (D): D100 % 
旬 度 (A): | 上 】 5 度 门 使 用 全 局 光 人 


扩展 R): 9 100 % 
大 小 (5): C= 3 像素 


品质 
$8 | "| sp 
杂 N: A 0  % 
闭 图 导 控 空投 影 (J) 


设置 为 默认 值 复位 为 默认 值 


























5-77 添加 数字 1 及 图 层 样 式 
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(9 


选择 “多 
项 参数 ， 


边 形 于 


绘制 出 形状 ， 
此 时 的 图 像 效 果 如 图 5-78 所 示 。 


工具 ”， 在 选项 栏 中 设置 各 


命名 为 “星星 1”， 


w 世人 由 区 全 | | 日 





给 “星星 ‖ 7 图 
Sh 


10 





一 
4: 
Yi 平 昌 拐角 

Vv EW 

编 进 边 依 据 : |55% 


| 平 由 缩 进 








5-78 绘制 形状 


层 添 加 “ 描 边 ” 


“内 Dp 和 ee a 





描 边 
一 结构 








大 小 5): GT 日 像素 
位 置 (P):; 外 部 

混合 模式 人): 正常 

不 透明 度 (0): RD 100  % 











填充 类 型 F): 颜色 ~ 
Ee: El 


内 阴影 





| 结构 





混合 模式 (6): 亚 加 hi 

不 透明 度 (0): = 100 % 
角度 QA): | 上 50 。 度 回 使 用 全 局 光 人 G) 
距离 0): (一 1 像素 
阻塞 (0): (一 0 % 
大 小 人) C9 像素 























等 高 线 : 4 口 消 隐 锯 频 


杂 色 (人 :CPP 0 % 








设置 为 默认 值 复位 为 默认 值 





设置 为 默认 值 复位 为 默认 值 








渐变 严 加 - 





- 站 





混合 模式 (0): 和 著 尖 v 站 | 仿 色 
不 透明 度 (P): = 100 % 
浙 交 : [| 辣 反 向 () 
样式 (0): 线性 Y 加 与 图 层 对 齐 人 种 
角度 QW): | we EL 


多吉) 一 一 一 一 一 100  % 











设置 为 默认 值 和 夏 位 为 默认 值 











prin 


续 添 加 图 层 样式 并 设置 相关 参数 ， 完 成 后 


图 5-79 添加 图 层 样 式 











时 的 图 像 效 果 如 图 5-80 所 示 。 
投影 
_ 结构 
混合 模式 6): 正片 到 底 ~ 加 加 





不 透明 度 (0): = 10 ” % 
角度 (A): | 上 | 可 
BB 





扩展 R): D3 100 % 





大 小 (S): Ce 盐 素 


度 [使 用 全 局 光 (G) 
距离 DO): (一 1 像素 








高 线 。 [4 问 水 据 齿 () 


杂 色 (N: CC 0 % 





时 图 层 挖 空 投影 (J) 


”设置 为 默认 值 | | 复位 为 默认 值 








5-80 添加 图 层 样 式 并 复制 图 层 


复制 图 层 ， 移 动 并 调整 其 位 置 ， 





呈 


E89 


此 








于 芭 IN ddV 尊 沪 评 














Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 





A 人 7》 像 绘制 “星星 1” 一样 ， 同 样 使 用 “多 边 
| 





| H: 日 尼 培 | 溢 | 这 :|5 | 口 对 |b 入 
人 
[Yi 平时 拐角 

[Yi 星 形 

缩 直 边 依据 ; 
[L_] 平滑 纺 进 








5-81 绘制 形状 


给 其 添加 “渐变 二 加 ”和 “投影 ”图 层 样 式 ， 效 果 如 图 5-82 所 示 。 


A VD 给 其 
/ .7 


























损 影 
一 晴 构 
混合 模式 提 ): 柔 光 ~[ 
靳 误 要 加 一 一 角度 (A): | 上 | 敬一 度 回 使 用 全 局 光 扣 
LW 这 | 3 
， se Es ls: 一 一 一 
混合 模式 (0)， 柔 江 > 同 仿 色 i = 
3 一 一 一 | 
Se ns ss 
新 变 : 国友 向 人 Rn) 
样式 DD， 线性 ~ 团 与 图 层 对 齐 人 ) | 上 外 质 
各 应 (全 5 一 点 :| -| Deis 
4 es 
缠 汕 (5): pr i 村 色 (N): = De 
加 图 层 控 空投 是 人 u) 
襄 置 为 点 让 值 复位 为 点 让 值 设置 光环 认 人 和 站 位 汶 点 训 值 

















5-82 添加 图 层 样式 及 图 像 效果 
17 为 从 绘制 圆 角 和 矩形 开始 到 上 一 步 的 图 层 ， 创 建 组 ， 并 将 其 命名 为 “1”， 复 制 出 
多 个 图 层 组 “1” 并 移动 位 置 ， 之 后 调整 亮 蜡 星星 的 排列 ， 如 图 5-83 所 示 。 
1 复制 图 层 组 “1”， 并 重 命名 为 “7”， 将 文字 信息 政 为 “7”。 文字 下 方 的 星星 
S 都 设置 成 暗色 星星 ， 如 图 5-84 所 示 。 








图 5-84 改变 星星 为 暗色 


5-83 图 像 效 果 
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7 [人 新 建 图 层 ， 并 在 “创建 新 的 填充 或 调整 图 层 ” 下 拉 列 表 中 选择 “色相 / 饱和 度 ” 
加 
时 在 “ 色 阶 ”的 “属性 ”面板 中 对 参数 进行 调整 ， 此 时 的 图 像 效 果 如 图 5-85 所 示 . 


国 口 外/io 度 























5-85 调整 “色相 /饱和 度 ”“ 色 阶 ” 及 图 像 效果 


1/ 使 用 “钢笔 工具 ”绘制 形状 ， 并 添加 “投影 ”图 层 样 式 ， 如 图 5-86 所 示 。 














混合 模式 (6): 中 六 旨 |I 疙 3 ~ 国 国 
不 透明 度 (0): > 15 % 
角度 (A): (| ) 50 ” 度 回 使 有 全 局 光 (G) 








于 芭 IN ddV 尊 沪 评 





中 高 D): 一 2 像素 
扩展 R): 一 100”% 
大 小 全) C= 像素 


等 高 线 : [ej 加 湖 据 齿 () 


杂 色 (N): CS 0 % 

















图 层 挖 空 投影 (U) 
设置 为 默认 值 复位 为 默认 值 





5-86 绘制 形状 并 添加 图 层 样式 
17 OO 使 用 “钢笔 工具 ”绘制 出 锁 把 ， 并 添加 “投影 ”图 层 样式 ， 如 图 5-87 所 示 。 接 
着 使 用 “钢笔 工具 ”绘制 出 锁 身 ， 此 时 效果 如 图 5-88 所 示 。 
投影 - 
| 结构 
“| ”混合 模式 (65) 正常 ~ El 
不 透明 度 (0): 一 100 % 
角度 :| | 区 一 度 问 使 用 全 局 光 (G) 











距 高 D): 人 1 像素 
扩展 R): 3 100  % 
大 小 (5): 人 |1 像素 














杂 色 (人 :> 0 % 


图 层 控 空投 影 (U) 
设置 为 默认 值 屋 位 为 默认 值 


图 5-87 添加 图 层 样 式 图 5-88 绘制 形状 
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WA 








新 这 到 加 
-新 一 一 -一 
混合 模式 (0)， 条 尖 ” 癌 信 色 

不 和 明度 P): 一 2 一 0 % 


i 1v| 口上 各) 


样式 (D0): 线性 ”| 财 与 图 层 对 齐 (D) 
角度 (N): ( | ) 90 度 
编 疏 G): 一 一 一 100 % 





设置 为 默认 值 复位 为 默认 值 











给 图 层 添 加 “渐变 痘 加 "”“ 投 影 ” 图 层 样式 ,此 时 的 图 像 效果 如 图 5-89 所 示 。 








投影 
一 结构 


混合 模式 (6): 正常 ~ 国 国 

不 透明 度 (D): > 100 % 
角度 A): ( 上 ) 506。 度 回 使 用 全 局 光 (G) 
中 高 D): /一 1 像素 
扩展 R): > 100  % 
大小 (9): CS 1 像素 


等 高 线 : [A 回 湖 逐 据 齿 () 


杂 色 (NN): CS 0 % 
图 层 挖 空投 景 ;(U) 


设置 为 默认 值 和 夏 位 为 默认 值 


























使 用 “钢笔 工具 ”结合 剪贴 蒙 版 绘制 出 锁 身 的 亮 
绘制 出 钥匙 孔 ， 并 添加 “投影 ”图 层 样 式 以 增强 立体 感 ， 此 时 的 图 像 效 果 如 图 














A 
so el 
投影 
结构 
混合 模式 B): 正常 ~ | 
不 透明 度 (0): 一 一 5 一 % 
角度 (A): (上) 50 。 度 回 使 用 全 局 光 (G) 


距 高 DC 1 像素 
扩展 REG 0 % 
大 小 (3): 人 一 1 像素 











图 层 控 空 投影 (U) 


设置 为 默认 值 复位 为 默认 值 














图 5-91 图 像 效 果 
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图 5-89 图 像 效 果 


暗部 及 高 光 , 继续 使 用 “钢笔 工具 ” 





图 5-90 图 像 效 果 
个 并 调整 位 置 和 文字 信息 ,此 时 , 图像 的 效果 如 图 5-91 所 示 。 


pl 7 将 图 层 组 “1” 复制 多 
使 用 “钢笔 工具 ”绘制 出 “游戏 关卡 ”标题 栏 的 形状 ， 如 图 5-92 所 示 . 





图 5-92 绘制 标题 栏 





2 给 形状 添加 图 层 样 式 ， 如 图 5-93 所 示 。 
























































内 阴影 - 投影 
- 结构 - 结构 
混合 模式 (6): 柔 光 ~ 混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): ==+J2? 了 一 % 不 透明 度 (0): py 100 % 
角度 (A): ( | \ 90 ” 度 回 使 用 全 局 光 (G) 前 度 (A): ( !) 90 ” 度 回 使 用 全 局 光 (G) 
所 J 四 
距离 0): CPP 1 像素 距离 0): C= 1 恤 喜 
阻塞 (QO: 一 一 = 25 mo 扩展 (R): zy 100 % 
大 小 G): = 2 像素 大 小 (5): 她 人 像素 
_ 品质 
| 品 质 RR 
二 等 高 线 : 辣 消 际 锯 占 人 0 
等 高 线 : [4 器 湖 旬 据 上 人) PE 
杂 色 (N): (二 > 0 % 
杂 色 (N): LT 0 9 
同 图 层 控 空投 影 (U) 
设置 为 默认 值 复位 为 默认 值 设置 为 默认 值 复位 为 默认 值 




















5-93 添加 图 层 样式 


2 添加 图 层 样式 后 的 标题 
二 yy 栏 效 果 如 图 5-94 所 示 。 





是 示 : 在 绘制 标题 栏 曲折 处 的 形状 

@ : 时 ， rh 会 制 右边 部 分 〈 将 形状 
“路 径 操 作 ”设置 为 “合并 形状 ”) ， 
然后 复制 该 形状 后 进行 水 平 翻转 ， 
并 移动 到 相应 位 置 





READMORE 





图 5-94 标题 栏 效果 
2 A 使 用 “钢笔 工具 ”绘制 出 标题 栏 的 阴影 ,将 图 层 的 “混合 模式 ”设置 为 “线性 加 深 ”、 
[站 个 “填充 ”为 10%， 如 图 5-95 所 示 。 
2 使 用 “钢笔 工具 ”绘制 出 标题 栏 的 曲折 处 ， 并 创建 剪贴 蒙 版 ， 效 果 如 图 5-96 
Pe ri 









加 














全 本 全 全 全 全 会 全 全 | 
~ 2 和 一 一 一 全 
图 5-95 绘制 标题 栏 阴 影 图 5-96 图 像 效 果 


E93 


DS 
CST 





于 下 1n ddyV 闫 汽 汶 s 














I0 使 用 “钢笔 工具 ”， 设 置 颜 色 后 绘制 出 标题 栏 曲折 处 的 阴影 部 分 ， 效 果 如 


Ea 





A SD 9 yD 


5-97 绘制 曲折 处 阴影 





MA 给 这 个 图 层 添加 “渐变 县 加 ” 图 层 样 式 ， 此 时 的 图 像 效 果 如 图 -98 所 示 ， 


新 变 晋 加 

- 新 受 

混合 模式 (0) 正常 ~ 回 念 色 
2 
样式 (LL): 线性 = 加 与 图 层 对 齐 问 

(一 
角度 的 )， 人 -5 上 哇 
狂放 悟 ) oe 100 吗 
保 轩 为 点 让 值 县 位 六 默认 值 
































图 5-98 添加 图 层 样 式 及 图 像 效果 


YO 将 上 一 图 技 进行 水 平 翻转 后 移动 到 相应 的 位 置 ， 效 果 如 图 5-99 所 示 。 使 用 “ 横 


沪 j 戏 关卡 





| 2 





写 Sa ya Ya 
图 5-99 水 平 翻转 并 移动 图 5-100 输入 文字 信息 
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2]O 人 
= 一 CA 


样式 (5): 情 扇形 下 


夯 水 平 (Hj 已 垂直 (V) 
亚 曲 (BJj: 
yy 
水 平 扭曲 (0): 
ey 
王 直 扭曲 (E): 


7 0 给 文字 图 层 添 加 “ 投 
wy 





5—101 


图 层 样式 ， 





~ 国 国 


混合 模式 6) 正常 


角度 :| 上 0 度 回 使 用 全 局 光 人 ) 
ww 


拭 高 亿 ): REG 1 慢 喜 


扩 民 (RY: = 100 on 





图 层 控 衬 投影 岂 
芒 半 为 默 冰 值 县 位 为 喜 训 值 





WD 


如 图 5-103 所 示 。 





一 什 面 和 当 
结构 

样式 (T): 内 介面 

方 此 oj: 得 > 

汇 计 0 TG 一 一 加 % 

OL OF 

小: 二 一 。 你 

次 人 ED): SG 二 一 ! ”入 雪 
阴影 

角度 WJ: 、0 。 度 

| ， | 回 使 用 全 局 光 (G) 

高 庶 “30 度 


光泽 等 读 PY 潮 $ 所 上 () 






































高 光 模 式 (H):， 渡 色 "| 
不 活 明 席 (0): (= 一 0 % 
阴影 模式 (A)， 线 性 加 宁 "Ey 








不 通明 度 (CO): SO 15 % 


设置 为 默认 值 | 揽 位 为 默认 值 























局 


图 5-102 添加 图 层 样 式 及 图 像 效 果 


D 7 使 用 “椭圆 工具 ”， 绘 制 出 一 个 正 圆 ， 添加 “斜面 和 浮雕 ” 


5-103 添加 图 层 样式 


,| A ON 





Ba KD [a 


“变形 文字 ”对 话 框 及 文字 效果 


此 时 的 图 像 效 采 如 图 5-102 所 示 。 








“ 描 边 ” 图 层 样式 ， 


DS 
CST 





摘 边 








一 结构 





SE Ce 1 像素 
位 置 (P): 外 部 

温 合 模式 (6): 正常 Me 

不 透明 度 (0): se 100  % 

















”填充 类 型 F): 颜色 ~ 
商 名 : 国 国 








设置 为 默认 值 夏 位 为 默认 值 
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于 下 1n ddyV 闫 汽 汶 s 











Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 


站 添加 图 层 样式 后 的 图 像 效 
Wu | oO 





5-104 图 像 效果 


复制 上 一 个 正 圆 ， 清除 图 层 样式 后 , 调整 形状 颜色 并 添加 “渐变 又 加 ”图 层 样式 ， 
7 UL 此 时 的 图 像 效果 如 图 5-105 所 示 ， 












渐变 一 加 
新 误 
混合 模式 (0): 柔 光 ~ 回访 色 
不 透明 度 P): = 团 |% 
新 变 : 回应 向 (R) 
样式 由 :线性 ~ ”加 与 图 层 对 弃 自 


角度 WW: (| 5。 庶 





引 全 











保 盏 为 点 太 值 景 位 为 默 记 值 








图 5-105 添加 图 层 样 式 及 图 像 效 果 


) 按照 之 前 “游戏 开始 界面 ” 中 绘制 按钮 的 方法 绘制 出 “关闭 ” “返回 ”和 “上 一 页 
7 47 等 按钮 ， 如 图 5-106 所 示 。 

站 /二 复制 “游戏 开始 界面 ” 文档 中 的 “小 猴子 ” 图 层 ， 并 在 此 基础 上 使 用 “钢笔 工具 ， 
OV 稍 作 人 和 修改， 绘制 出 本 文档 中 小 猴子 的 形象 。 至 此 ， 本 实例 制作 完成 ， 效 果 如 
图 5-107 所 示 。 











图 5-106 绘制 按钮 图 5-107 图 像 效果 
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e 【又 计 师 由 (得 





(项 友 游戏 类 APP ul 设计 加 何 吸引 用 户 


无 论 是 涉及 哪 一 方 领 域 的 设计 , 在 其 设计 过 程 中 都 要 留意 设计 对 象 所 面向 的 消费 群体 ， 
在 APP UI 设计 原则 的 基础 上 ， 根 据 设 计 对 象 本 身 的 特点 ， 坚 持 “ 以 人 为 本 ”才能 设计 出 
优秀 的 作品 来 吸引 用 户 ， 因 此 要 特别 地 重视 用 户 的 体验 过 程 。 

而 在 这 个 过 程 中 ， 界 面 所 市 来 的 视觉 冲击 力 至 少 要 占 70% 的 比例 ， 首 先 要 对 颜色 进 
行 合 理 搭 配 ， 要 能 把 握 住 用 户 的 心理 。 例 如 ， 休 闲 类 游戏 与 策略 类 游戏 在 颜色 搭配 上 就 有 
很 大 的 差异 ， 对 于 两 者 的 玩家 对 象 ， 前 者 大 多 是 儿童 、 青 少年 和 女性 ， 而 后 者 则 大 多 数 为 
男性 ， 因 此 在 颜色 方面 ， 前 者 就 应 以 可 爱 、 粉 嫩 、 活 泌 等 明明 的 颜色 为 主要 色 块 ， 后 者 应 
以 沉稳 、 神 秘 的 冷色 调 为 主 ， 如 图 5-108 所 示 。 





图 5-108 不 同类 型 游戏 配色 的 差异 
从 男 一 个 方面 来 讲 ， 能 打动 用 户 的 一 个 重要 因素 是 界面 中 对 细节 的 处 理 ， 也 就 是 在 设 
计 的 过 程 中 ， 完 成 整体 设计 后 ， 能 够 起 到 画龙点睛 作用 的 小 点 级 ， 它 不 仅 能 够 增加 画面 的 
层次 感 ， 而 且 还 能 提升 用 户 玩 要 的 乐趣 。 不 过 在 这 里 一 定 要 谨慎 ， 因 为 一 不 小 心 ， 就 会 变 
得 多 此 一 举 ， 甚 至 是 适得其反 ， 破 坏 整 个 设计 。 
这 些 细节 不 仅 可 以 从 大 小 及 精致 度 上 进行 区 分 ， 有 意识 地 在 形态 及 颜色 上 进行 改变 也 
是 设计 中 经 常用 到 的 ， 如 图 5-109 所 示 。 
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图 5-109 不 同 界面 的 细节 处 理 
游戏 类 APP 设计 ， 还 要 考虑 到 设计 的 目的 是 可 以 让 用 户 在 娱乐 的 过 程 中 放松 心情 ， 
i 力 。 因 此 在 设计 的 同时 ， 要 将 游戏 形象 及 其 表情 、 游 戏 的 声音 等 相 结 合 ， 来 达到 用 
能 够 各 受 游戏 的 体验 过 程 ， 如 图 5-110 所 示 。 当 然 最 重要 的 一 点 是 游戏 后 期 的 程序 设 
Wh E 够 有 意思 ， 让 用 户 有 好 感 ， 才 能 在 这 个 竞争 激烈 的 APP 市 场 中 立 于 不 败 之 地 。 
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图 5-110 不 同 游戏 界面 的 画面 效果 


全 ED 游戏 中 的 那些 按 钥 


在 玩 游戏 的 过 程 中 ， 总 会 看 到 那些 各 陈 各 样 的 按钮 ， 这 些 按 钮 ， 疫 有 一 个 是 随意 搁置 ， 
没有 功能 性 的 。 由 于 移动 端的 尺寸 限制 ， 和 PC 端 上 的 游戏 相 比 ， 画 面 的 尺寸 有 限制 性 ， 
在 有 限 的 画面 中 设计 出 既 丰 富 细致 又 清楚 明了 的 界面 ， 在 APP 设计 过 程 中 需要 进行 仔细 
的 思量 与 反复 的 修改 才能 保证 设计 更 加 优秀 。 





游戏 中 的 按钮 一 般 分 为 以 下 几 种 : 


© “ 讲 入 ”按钮 也 就 是 “开始 游戏 ”按钮 ， 一 般 出 现在 启动 界面 的 开始 界面 ， 
主要 是 引导 用 户 进入 游戏 的 主页 面 。 在 设计 时 ， 要 在 不 破坏 界面 美观 性 的 前 提 
下 ， 尽 可 能 地 把 按钮 放大 ， 这 样 才 会 凸显 出 来 ， 如 图 5-111 所 示 。 
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图 5-111 进入 按钮 
© “返回 ”按钮 : 出 现在 除了 居 动 界面 及 开始 界面 以 外 的 界面 上 上， 是 游戏 中 不 可 
缺少 的 按钮 。 主 要 位 于 画面 中 的 四 角 区 域 ， 相 似 的 按钮 主要 有 “关闭 ” 按 钮 、 
“菜单 ”按钮 及 “设置 ”按钮 ， 如 图 5-112 所 示 。 
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图 5-112 “返回 ”“ 关 闭 ” 等 按钮 
@。” “关卡 ”按钮 ， 出 现在 关卡 界面 ， 主 要 是 作为 玩家 用 户 的 游戏 指南 ， 同 时 “ 关 
卡 ” 按 钮 的 设计 需要 进行 多 方位 的 思考 ， 由 于 游戏 的 长 远 性 发 展 的 特征 ， 因 此 
要 做 到 “关卡 ”按钮 无 论 是 在 顾 色 上 还 是 在 形状 上 ， 都 能 广泛 地 应 用 于 各 个 场 
景 或 背景 中 。 两 者 相 结 合 ， 既 和 谐 又 丰富 ， 如 图 5-113 所 示 。 
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5-113 各 种 “关卡 ”按钮 


“设置 ”按钮 : 一 般 出 现在 开始 界面 、 关 卡 界 面 及 游戏 界面 中 ， 主 要 以 展开 按 
钮 的 形式 出 现 ， 其 中 包含 “声音 ”按钮 ， 以 及 “声效 ”按钮 ， 如 图 5-114 所 示 。 


国民 ui class 
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5-114 各 种 “设置 ”按钮 














Photoshop 热门 铺 PP 类 型 设计 从 和 人 门 到 精通 


设计 准备 与 规划 





在 进行 APP 界面 的 制作 之 前 需要 进行 准备 与 规划 工作 ， 包 括 素 
材 准 备 、 界 面 布局 规划 、 确 定 风格 与 配色 。 


(CI 素材 准备 


准备 素材 是 APP UI 设计 的 重要 一 步 ，APP UI 设计 师 平 常 可 以 收集 相关 的 APP 进行 
参考 借鉴 ， 从 优秀 的 界面 中 获取 灵感 ， 然 后 提炼 总 结 出 自己 的 设计 方案 。 如 图 6-1 所 示 
为 收集 的 音乐 类 APP。 
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图 6-1 参考 素材 
本 章 绘 制 的 音乐 类 APP 界面 需要 的 素材 包括 歌手 照片 、 用 户头 像 等 素材 ， 如 图 6-2 
所 示 。 





图 6-2 照片 素材 


(CM 了 界面 布局 规划 


一 款 疼 乐 APP 根据 用 户 的 诉求 ， 应 该 具备 音乐 播放 功能 、 首 乐 列 表 等 基本 内 容 。 除 
此 之 外 ， 还 应 该 有 设置 界面 、 登 录 、 注 册 界 面 等 方便 用 户 使 用 的 界面 。 本 章 挑选 出 3 个 界 
面 进行 制作 讲解 ， 分 别 为 音乐 播放 界面 、 本 地 音乐 询 表 界面 和 用 户 注册 界面 。 首 先 对 3 个 
界面 的 布局 进行 规划 ， 确 定 六 致 版 式 ， 方 便 后 面具 体内 容 的 状 加 ， 如 图 6-3 所 示 。 
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标题 、 头 像 信息 一 登录 、 注 册 标签 一 一 一 
| 
菜单 栏 











用 户头 像 
歌手 、 专 辑 图 片 
音乐 列表 
全息 
进度 条 
播放 控制 按钮 
一 一 导 航 菜单 
音乐 播放 界面 本 地 音乐 列表 界面 用 户 注册 界面 


图 6-3 界面 布局 规划 


(CI 确定 风格 与 配色 一 


本 实例 将 要 制作 的 音乐 类 APP UI 为 扁平 化 风格 ， 界 面 风 格 简洁 、 清 新 。 天 蓝 色 给 人 
一 种 干净 、 平 和 和、 舒适 的 感觉 ， 如 图 6-4 所 示 。 监 色 常 与 黄色 系 、 红 色 系 进行 搭配 ， 如 
图 6-5 所 示 。 天 监 色 能 舒缓 压力 ， 用 于 音乐 界面 中 十 分 恰当 。 本 实例 定位 使 用 人 和 群 为 年 
轻 时 尚 一 族 ， 也 采用 受 大 多 数 男女 所 喜爱 的 天 蓝 色 作为 主 色 调 ， 降 低 蓝 色 的 饱和 度 ， 获 得 
更 好 的 视觉 感受 。 使 用 对 比 色 系 粉 色 为 点 睛 色 、 黄 色 为 辅助 色 ， 再 以 白色 与 灰色 为 调和 色 ， 
把 握 颜 色 的 比例 ， 能 使 界面 给 人 干净 、 和 舒适 的 感觉 。 调 整 主 色 调 的 色彩 ， 可 以 获得 更 多 蓝 
色 ， 如 图 6-6 所 示 。 





图 6-4 蓝 色 图 6-5 蓝 色 搭配 


睛 色 ”辅助 色 调和 色 调 由 主 色调 变化 的 蓝 色 


图 6-6 实例 配色 
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界面 制作 


对 于 任何 一 款 应 用 来 说 ， 界 面 设计 、 图 标 设计 至 整体 UI 设计 
vv 
vs 





都 是 非常 重要 的 ， 用 户 可 以 直观 地 感受 到 整个 APP 的 气质 和 特性 。 
本 节 开 始 制 作 立 乐 APP 的 界面 ， 包 括 音乐 播放 界面 、 本 地 音乐 
列表 界面 和 用 户 注 册 界 面 。 


(CI 音乐 播放 界面 


播放 界面 是 音乐 类 APP 最 具 个 性 化 的 页 面 ， 也 是 APP 展示 设计 创意 的 集中 地 。 一 般 
播放 界面 包括 播放 歌曲 名 、 歌 手 或 专辑 图 片 、 播 放 进度 条 、 播 放 控制 按钮 及 其 他 菜单 按钮 。 


| 


站 设计 思路 


本 节 要 制作 的 是 音乐 播放 界面 ， 主 要 表现 简洁 风格 ， 通 过 精简 界面 内 容 ， 并 对 重要 信 
恩 进 行 放 六 或 通过 颜色 处 理 来 表现 主 次 。 歌 手 / 专辑 图 器 界面 很 六 的 空间 ， 十 分 抢眼 ; 播 
放 进 度 条 以 简单 的 矩形 条 显示 ， 不 加 任何 装饰 ， 仅 通过 粉色 的 滑 块 来 突出 显示 当前 播放 进 
度 ; 主要 操作 按钮 以 横 条 的 形式 铺 在 页 面 下 方 ， 设 置 背景 为 日 色 ， 对 比 鲜 明 ; 对 其 他 信息 
进行 弱化 处 理 。 如 图 6-7 所 示 为 制作 流程 。 





MUSIC 三 MUSIC 


Sometimes When We Touch Sometimes When We Touch 
la Olivia 





图 6-7 制作 流程 


2 制作 步 又 


图 层 混合 模式 、 剪 贴 蒙 版 、“ 摘 边 ” 图 层 样 式 
第 6 章 \6.2.1 音乐 播放 界面 









































OF 新 建文 档 ， 设 置 背景 磊 色 为 蓝 色 ， 然 后 使 用 “和 矩形 工具 ”绘制 深蓝 色 和 矩形 ， 如 
图 6-8 所 示 。 
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O02 使 用 “矩形 工具 ”绘制 矩形 ,设置 图 层 的 “混合 模式 ”为 “ 晤 加 ”、 


参数 为 20%， 如 图 6-9 所 示 。 
V7》 使 用 “椭圆 工具 ”绘制 正 圆 ， 


下 移动 一 层 ， 如 图 6-10 所 示 。 





6-8 绘制 矩形 


“不 衣 明 度 ” 


添加 率 材 图 片 并 创建 和 剪贴 莹 版， 并 将 两 个 图 层 向 


图 6-9 绘制 矩形 


6-10 添加 素材 


OA 双击 椭圆 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 为 图 层 添 加 “ 描 边 ”图 层 样式 ， 


图 6-11 所 示 。 


LO 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 确 定 后 的 图 像 效果 如 图 6-12 所 示 。 在 上 方 绘 
图 标 并 输入 标题 文字 ， 如 图 6-13 所 示 。 








描 边 
结构 
大 小 G): 一 一 一 一 10 像素 
位 置 P): 处 部 
混合 模式 介 ): 正常 
不 透明 度 (0): se 10  % 


填充 类 型 F): 颜色 
颜色 :| | 














设置 为 默认 值 复位 为 默认 值 





图 6-11 添加 “ 描 边 ”图 层 样 式 





图 6-12 图 像 效果 


图 6-13 绘制 图 标 并 输入 文字 





如 
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VO A A A dh 
O 色 和 矩形 作为 按钮 组 的 背景 ， 然 后 绘制 播放 控制 按钮 ， 如 图 6-15 所 示 。 在 最 下 方 
绘制 3 个 图 标 ， 即 元 成 了 播放 界面 的 绘制 ， 如 图 6-16 所 示 。 


MUSIC MUsSIC MUSIC 


Sometimes When We Touch Sometimes When We Touch Sometimes When We Touch 
Olivia Olivia 





图 6-14 绘制 播放 进度 条 图 6-15 绘制 播放 控制 按钮 6-16 完成 绘制 


CI 本地 音乐 列表 男 面 


首 乐 列表 界面 一 般 使 用 横 条 排 诈 结构 ， 简 单 清 楚 。 通 弟 还 会 添加 一 些 相 关 的 按钮 ， 包 
括 播放 控制 、 社 交 分 享 等 。 


设计 思路 


本 实例 制作 的 音乐 列表 界面 使 用 传统 的 列表 结构 。 列 表 以 白灰 色相 间 来 区 分 。 中 间 展 
开 的 歌曲 菜单 使 用 黄色 以 在 列表 中 突出 显示 。 列 表 前 使 用 统一 的 图 标 ， 对 当前 播放 歌曲 和 
选中 歌曲 的 图 标 进行 修改 ， 便 于 使 用 者 区 分 。 底 部 导航 为 3 个 菜单 ， 为 体现 其 重要 性 ， 菜 
单 图 标 与 文字 都 相对 较 大 。 选 中 的 莱 单 为 蓝 色 ， 其 他 为 灰色 ， 整 个 界面 色调 看 起 来 很 舒服 ， 
整体 性 较 强 。 如 图 6-17 所 示 为 本 实例 的 制作 流程。 











图 6-17 制作 流程 
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> 制作 步 驿 
知识 点 图 层 样式 、 路 径 操 作 、 复 制 与 排列 
光盘 路 径 第 6 章 \6.2.2 本 地 音乐 列表 界面 
人 
图 16-18l 所 示 , 使 用 “椭圆 工具 ” pM 将 


并 将 
素材 拖 入 文档 ， 创 建 剪贴 蒙 版 ， 如 图 6-19 所 示 。 选 择 椭圆 图 
pe 


6 DO 





























位 置 (P): 
混合 模式 (6): 
不 透明 度 (O): 


填充 类 型 F): 


颜色 : 


外 部 


正常 





颜色 ~ 


DD 100 % 





|_ 设 置 为 默认 值 _| | 复位 为 默认 值 | 














图 6-18 绘制 矩形 图 6-19 绘制 圆 并 添加 素材 


0) | 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 
= ”图像 效果 如 图 6-21 所 示 。 


6-20 设置 “ 描 边 ” 图 层 样式 


Z2 使 用 “ 横 排 文字 工具 ”输入 
i 如 图 6—22 有 


人 本 地 歌曲 
Don't Let Me Get Me 





图 6-21 图 像 效 果 图 6-22 输入 文字 
0 使 用 “ 圆 角 和 珑 形 工具 ”绘制 两 个 圆 角 竹 形 ， 设 置 上 面 一 个 圆 角 珑 形 的 “路 径 操 
作 ” 为 “ 减 去 顶层 形状 ”， 然 后 使 用 “椭圆 工具 ”再 次 绘制 两 个 圆 角 短 形 ， 如 
5 图 6-23 所 示 。 
设置 图 形 和 文字 图 层 的 “不 透明 度 ” 参 数 均 为 60%W， 效 果 如 图 6-24 所 示 。 


人 本 地 歌曲 
MN Don't Let Me Get Me 





图 6-23 绘制 形状 


图 6-24 设置 “不 透明 度 ” 后 的 效果 


2 


一 上 




















LO 使 用 “和 抵 形 工具 ”绘制 矩形 ， 设 置 填充 颜色 为 蓝 
色 , | 如 图 (6-25 所 示 。 | 使 用 绘图 工具 绘制 图 标 ， 
如 图 6-26 所 示 。 


6-25 绘制 矩形 图 6-26 绘制 图 标 








提示 : 上 面 的 线 ， i 
都 是 通过 绘制 基本 的 形 
状 ， 并 设置 路 径 操 作 完 
成 的 ， 如 图 6 一 27 所 示 。 
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6-27 路 径 操 作 结 果 
OF 7/ 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 图 6-28 所 示 。 使 用 “ 短 形 工具 ”绘制 矩形 ， 


复制 多 个 矩形 并 进行 排列 ， 如 图 6-29 所 示 。 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
如 图 6-30 所 示 。 





号 本 地 歌曲 号 本 地 歌曲 本 地 歌曲 
NM DomtLet Me Get Me 有 由 Don'tLet Me Get Me MN Don'tLet Me Get Me 
、Dont Let Me Get Me 


、Trouble Maker 


、Sober 


、Dont Let Me Get Me 
、Trouble Maker 
、Let it be 


Family 


、gotta have you 





图 6-28 输入 文字 6-29 绘制 矩形 并 复制 图 6-30 输入 文字 
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O08 使 用 “ 圆 角 矩形 工具 ”绘制 圆 0 ns 复制 | 圆 角 矩形， 修改 磊 色 ， 绘 
〇 ”向 乱 形 ， 并 绘制 耳机 形状 ， 如 es ea ee 
图 6-31 所 示 。 折 示 ， 


本 地 歌曲 


MN Don't Let Me Get Mt 





1、Dont Let Me Get Me 局 


2、Trouble Maker 


3、 Sober 
3、Sober 


6-32 绘制 图 形 





6-31 绘制 图 形 


7 复制 多 个 音乐 符号 形状 和 圆 角 和 矩形 的 组 合 ， 并 调整 位 置 ， 如 图 6-33 所 示 。 在 右 
侧 绘制 向 下 的 箭头 图 标 ， 如 图 6-34 所 示 。 复 制图 标 ， 并 修改 颜色 与 方向 ， 如 
EOS» pes 


本 地 歌曲 人 本 地 歌曲 
Nn 


\ Don't Let Me Get Me 


ks 本 地 歌曲 
NM Don't Let Me Get Me 


\ Don't Let Me Get Me 


、Don't Let Me Get Me 


、Trouble Maker 


、Sober 


、Dont Let Me Get Me 


、Trouble Maker 


、Let it be 


、Family 


8、gotta have you 


6-33 复制 图 形 并 调整 位 置 


、Don't Let Me Get Me 
、Trouble Maker 


、Sober 


、Don't Let Me Get Me 
、Trouble Maker 
、Let it be 


、Family 


、gotta have you 





图 6-34 绘制 箭头 


、Dont Let Me Get Me 
、Trouble Maker 


、Sober 


、Don't Let Me Get Me 
、Trouble Maker 
、Let it be 


、Family 


、gotta have you 





6-35 复制 图 标 并 修改 颜色 与 方向 


209 





一 上 











Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 





绘 有 具 绘 示 山 
77 人 如 图 0-30 SS 本 地 歌曲 
J 完成 界面 的 制作 ， 如 图 G7 37 NM Don't Let Me Get Me 
J 完成 效果 。 、Dont Let Me Get Me 
、Trouble Maker 


、Sober 





四 3、Sober 公 


、Dont Let Me Get Me 


、Trouble Maker 


、Let it be 





Family 


4、Don't Let Me Get Me 、gotta have you 


5、 Trouble Maker 


6、Let It be 





6-36 绘制 图 标 6-37 完成 的 效果 


(CBE 用 户 注册 界面 


用 户 登 录 与 注册 界面 在 前 面 已 经 介绍 过 ， 通 党 两 个 界面 的 内 容 都 不 会 很 多 ， 一 般 为 头 
像 、 用 户 名 、 密 码 、 注 册 按 钮 等 。 


设计 思路 


本 实例 制作 的 是 注册 界面 ， 界面 布局 十 分 简洁 ， 简 单 的 文字 + 图 标 就 表达 了 界面 的 主 
题 。 头 像 图 标 是 整个 界面 中 的 亮点 ，“ 注 册 ” 按 钮 以 鲜明 的 黄色 作为 吸引 点 击 的 手法 ， 制 
作 流 程 如 图 6-38 所 示 。 








图 6-38 制作 流程 
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制作 步骤 


LA 新 建文 档 ， 在 文档 上 方 使 用 “ 短 形 工具 ”绘制 矩形 ， 使 用 “和 横 排 文字 工具 ”和 输 
入 文字 ， 如 图 6-39 所 示 。 在 下 方 绘制 矩形 ， 并 复制 3 个 ， 然 后 修改 颜色 ， 如 
图 6-40 所 示 ， 








6-39 绘制 矩形 并 输入 文字 6-40 绘制 矩形 并 复制 
0 使 用 绘图 工具 绘制 图 形 ， 使 03 添加 素材 图 片 ， 并 创建 前 贴 
-一 用 “椭圆 工具 ”绘制 正 辆 ， &Z 莹 版 ， 如 图 6-42 所 示 。 


如 图 6-41 所 示 。 





6-41 绘制 图 形 图 6-42 添加 素材 


2 加 





乎 下 In ddyV 业 汛 只 











Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 





0 使 用 绘图 工具 绘制 图 形 ， 如 0 使 用 “ 圆 角 和 矩形 工具 ”绘制 
图 6-43 所 示 。 I 加 角 和 矩形 ， 如 图 6-44 所 示 。 





6-43 绘制 图 形 6-44 绘制 圆 角 矩形 


LO 使 用 “ 圆 角 和 矩形 工具 ”绘制 圆 角 矩形, 使 用 “椭圆 工具 ”绘制 正 圆 , 如 图 6-45 所 示 。 
使 用 绘图 工具 绘制 图 标 ， 如 图 6-46 所 示 。 





@ 











6-45 绘制 圆 角 和 矩形 与 正 贺 6-46 绘制 图 标 


0 网 使 用 “ 横 排 文 字 工 具 ” 输 入 文字 ， 如 图 6-47 所 示 。 继续 绘制 贺 角 短 形 ， 并 输入 
文字 ， 完 成 注册 界面 的 绘制 ， 如 图 6-48 所 示 . 





图 6-47 输入 文字 图 6-48 完成 绘制 





Sl 





。 设计 师 几 得 





(IE Android 界面 的 点 九 切 图 


设计 师 经 常会 做 一 个 俗称 “点 九 ” 的 切 图 ， 什么 是 “点 九 ” 呢 ? “点 九 ” 是 Android 
平台 处 理 图 片 的 一 种 特殊 形式 ， 由 于 文件 的 扩展 名 为 “.9.png”, 所 以 被 称 为 “点 九 ”。“ 点 
九 ” 也 是 在 Android 平台 多 种 分 辨 率 需 适 配 的 需求 下 ， 发 展 出 来 的 一 种 独特 的 技术 。 它 可 
以 将 图 片 横向 和 纵向 随意 进行 拉 仲 ， 而 保留 像素 精细 度 、 渐 变质 感 和 圆 角 的 原 大 小 ， 实 现 
多 分 辩 率 下 的 完美 显示 效果 ， 同 时 减少 不 必要 的 图 片 资源 ， 可 谓 切 图 利器 。 
MS i ee BI PNG EE 7 Fool 0 eh Ho DD soy a A a DAA 
个 中 间 区 域 ， 如 图 6-49 所 示 。4 个 角 是 不 做 拉 伸 的 ， 所 以 还 能 一 直 保 持 圆 角 的 清晰 状态 ， 
而 两 条 水 平 边 和 垂直 边 分 别 只 做 水 平和 垂直 拉 伟 ， 所 以 不 会 出 现 边 被 拉 粗 的 情况 ， 只 有 中 
间 用 黑 线 指定 的 区 域 做 拉 伸 ， 结 果 是 图 片 不 会 走样 。 
智能 手机 中 有 自动 横 屏 的 功能 ， 
同一 幅 界 面 会 随 着 手机 ( 或 平板 电 
脑 ) 中 方向 传感器 的 参数 不 同 而 改 
变 显 示 的 方向 ， 在 界面 改变 方向 后 ， 
界面 上 的 图 形 会 因为 长 宽 的 变化 而 
产生 拉 伸 ， 造 成 图 形 的 失真 变形 。 
Android 平台 有 多 种 不 同 的 分 辩 
率 ， 很 多 控件 的 切 图 文件 在 被 放大 








6-49 分 成 了 9 个 部 分 
拉 伸 后 ， 边 角 会 模糊 失真 。 在 Android 平台 下 使 用 点 九 切 图 技术 ， 可 以 将 图 片 同 时 进行 横 
向 和 纵向 拉 伸 ， 以 实现 在 多 分 辨 率 下 的 完美 显示 效果 。 
如 图 6-50 所 示 ， 普 通 拉 伸 和 点 九 拉 伸 效 果 对 比 很 明显 ， 使 用 点 九 切 图 后 ， 仍 能 保留 
图 像 的 渐变 质感 和 圆 角 的 精细 上 度 。 


普通 拉 伸 效果 点 九 拉 伸 效果 


图 6-50 拉 伸 对 比 





2 


nl 











了 解 了 点 九 切 图 的 原理 ， 下 面 来 学 习 点 九 切 图 的 绘制 方法 。 


OF 绘制 好 的 图 形 ， 使 用 “ 载 者 ( 乌 本 本 | 和 旧 &( 类 型 0 
Pn \ 
wl oe Pyar AA OE A 

自动 色调 [IN) Shitt+Ctr|l+L 
小 ”命令 ， 如 图 6-52 所 示 。 自动 对 比 度 (U) Alt+Shift+Ctrl+L 


自动 颜色 ID) Shift+Ctrl+B 


二 上 E+ Ctrl+I 
BlttCtr|t+ 





复制 (D).. 
6-51 裁剪 后 6-52 执行 “图 像 ”| “画布 大 小 ”命令 





0 人 7 弹出 对 话 框 ， 将 宽度 和 高 度 均 增加 


一 当前 支 小 : 22.4K 





帘 度 ，182 像素 2 像素 ， 如 图 6-53 所 示 。 确 定 后 效 
高 度 : 42 | 
EE 果 如 图 6-54 所 示 。 
一 新 建 大 小 : 23.7K 
宽度 (W): 184 | | 像素 
高 度 (H): 44 像素 “ 
回 相对 (R) 























6-53 修改 画布 大 小 6-54 确定 后 效果 


ZJ 查看 图 中 的 可 拉 撮 区域， 即 不 包括 圆 角 、 光 泽 等 特殊 区 域 的 区 域 ， 如 图 6-55 
所 示 ， 


提示 : 如 果 不 能 确定 某 一 ji 
不 是 可 拉 伸 区 域 ， 可 以 在 绘制 
前 将 图 片 该 部 分 拉 伸 一 下 试 试 ， 
如 果 图 片 出 现 了 失真 的 变化 ， 该 
区 域 就 是 不 可 拉 伸 区 域 。 





READWORE | 


图 6-55 可 拉 伸 区 域 


OA 设置 前 景色 为 黑色 ,选择 “画笔 工具 ” Pe me 
100%， 再 新 建 一 个 图 层 ， 对 图 片 四 周 的 透明 区 域 进行 绘制 填充 ， 他 而 56 


所 示 。 
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6-56 绘制 效果 





© 
提示 : 上 部 为 横向 可 拉 仲 区域 ， 左 侧 为 纵 二 国 © 
向 可 拉 伸 区 域 ， 这 两 个 部 分 按照 可 拉 伸 区 域 提示 : 手绘 的 黑 线 拉 伸 区 闫 
的 特点 确定 黑色 条 纹 的 长 短 ， 下 方 为 横向 内 全 人 oo i 
容 区 域 ， 右 侧 为 纵向 内 容 区 域 ， 内 容 区 域 是 op a 
指 如 果 这 个 按钮 是 个 窗口 ， 右 下 两 区 域 延伸 ee 
成 为 的 长 方形 就 是 可 以 显示 内 容 的 区 域 Android 系统 编译 ， 导 致 程序 报错 。 





READ MORE 





READMORE 





0 太 执行 “文件 ”| “存储 为 Web 所 用 格式 ”命令 ， 在 打开 的 对 话 框 中 设置 优化 格式 
为 “png-24”， 如 图 6-57 所 示 。 
/A 单 击 “存储 ”按钮 ,在 打开 的 对 话 框 中 设置 文件 名 称 ， 其 扩展 名 为 . 9. png， 如 
图 6-58 所 示 ， 最 后 单 击 “ 保 存 ” 按 钮 即 完成 了 点 九 的 绘制 。 



















































































a re = 符 优 化 结果 存储 为 
要 i 保存 在 CD: ”前 ps APP WI 设计 ~ 四 让 区 力 " 
bd ee 3 名 称 修改 日 期 
国 已 YBNP “he 
= a 而 笔 1 章 2015/12/1 13:48 
村 转换 为 sRGB ey 
预览 : 显示 器 颜色 点 画 
元 数据 : 版 权 和 联系 信息 于 
颜色 表 [局 
库 
计算 机 
4 | 呀 | } 
< ”四 
ee 格式 EE 
动画 
eC 设置 默认 设置 > 
一 1 Cre) | 
i Ws: Lis a 
图 6-57 设置 优化 格式 6-58 修改 文件 名 称 


QIEEB 常见 的 APP 登录 界面 分 析 


下 面 介绍 常见 APP 登录 界面 。 

级 模糊 背景 

模糊 背景 的 运用 可 以 更 好 地 衬托 颜色 ， 不 仅 让 整个 网 站 显得 更 加 人 性 化 ， 并 且 在 很 大 
程度 上 烘托 出 网 站 所 要 表现 的 氛围 ， 为 整个 视觉 提供 更 好 的 体验 。 如 图 6-59 所 示 的 登录 
界面 ， 在 模糊 的 背景 上 面 用 极 简 的 图 标 与 细 线 来 设计 ， 霄 景 图 的 色调 与 按钮 的 颜色 很 有 心 
地 挑选 了 同一 色 系 ， 让 界面 融洽 地 结合 成 一 个 整体 。 
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一 了 








9:00 AM 


| 
ReaQing Fun 


JENUIIISAWIw 


eeee0 Carrier 二 4:34 PM 








i 





MI Emailaddress 


白 Password 


Sign in 


Sign in using Facebook 





图 6-59 模糊 背景 
暗色 调 背 景 
如 图 6-60 所 示 ， 当 我 们 一 眼看 到 实例 时 ， 明 亮 的 输入 框 吸引 了 所 有 用 户 的 注意 力 。 
音调 处 理 过 的 背景 图 使 登录 的 表单 成 了 页 面 的 视觉 中 心 ， 没 有 任何 东西 可 以 分 散 用 户 的 注 
意 力 。 这 不 仅 是 优质 的 感官 体验 ， 更 是 舒适 的 用 户 体验 。 


seo Omni 3 eeee0 Orange | eeee0 Omni 全 4:20 PM 


ER 全 


E-mailaddress 


f Sign in with Facebook 


free (Gf) Sign in with Facebook 
ign In WI witter 





图 6-60 暗色 调 背 景 
局 平 化 的 纯色 背景 


局 平 化 的 纯色 背景 在 APP 登录 界面 中 的 应 用 十 分 多 。 基 本 样式 也 证 显得 单调 无 聊 ， 
但 是 如 果 在 色彩 上 精心 搭配 ， 局 平 化 的 登录 界面 将 变 得 活 泌 俏 皮 起 来 ， 如 图 6-61 所 示 。 


Learn a skill, Share a skill 





图 6-61 扁平 化 的 纯色 背景 
园 洁 果 的 视觉 纵 线 


人 的 浏览 视线 一 般 呈 “L” 形 ， 意 指 从 上 到 下 ， 从 左 至 右 。 而 设计 登录 界面 很 注重 对 
用 户 的 引导 作用 ， 当 一 个 界面 没有 过 多 的 强调 元 素 时 ， 那 么 界面 的 视 锅 浏览 顺序 符合 “[L 


形 规律 束 基 本 符合 用 户 的 心理 预期 。 那 么 ， 用 户 就 个 用 过 多 思考 和 寻找 ， 能 简单 高 效 地 执 
行 完 表 单项 的 填写 和 提交 ， 如 图 6-62 所 示 。 





eeeo00 BELL 全 4:21 PM eeeoo0 CLARO 全 


一 Welcome 


pe 


Your Photo 


" 


Sperant 


[v] Email address: 


-| Password: 


蝎 Usuario 


| 


Authenticate 


Entrar 


ZOIvido su contraserfia? 





6-62 清晰 的 视觉 纵 线 


2 





由 一 了 


SA 
EA 


翌 ' 光 In ddv 普 





= 0 





全 注重 用 户 体验 设计 

登录 和 注册 表单 的 使 用 率 非 常 高 ， 一 个 表单 的 设计 其 实 也 不 是 简单 的 事情 ， 用 户 体验 
是 必须 要 考虑 的 事情 。 有 的 喜欢 把 注册 和 登录 都 放 在 一 个 页 面 ， 有 的 喜欢 用 AJAX 无 刷新 
效果 来 展示 ， 花 样 很 多 ， 总 之 ， 一 切 以 最 佳 用 户 体验 为 出 发 点 。 设 计 永 无 止境 ! 哪怕 是 一 
个 注册 表单 ， 也 值得 再 细心 研究 。 如 果 不 重视 用 户 体验 ， 就 会 导致 网 站 流失 大 量 用 户 。 

@@ 减少 用 户 输入 。 

一 般 说 来 ， 注 册 表 中 每 增加 一 个 字段 ， 注 册 
率 就 会 相应 地 下 降 。 

用 户 在 注册 时 被 要 求 填写 邮箱 地 址 两 次 或 重 
复 输入 密码 是 非常 麻烦 的 ， 特 别 是 在 手机 上 。 其 
实用 户 一 般 都 会 使 用 自己 的 常用 邮箱 和 密码 注册 ， 
所 以 不 那么 容易 忘记 。 采 用 输入 一 次 密码 完成 注 = 
册 更 符合 人 们 的 期 望 ， 但 是 为 了 防止 密码 输入 和 -于 
用 户 的 预期 密码 不 同 ， 可 以 采用 人 允许 用 户 查 看 明 ss 
文 密码 的 方式 。 假 设 哪 天 用 户 忘记 密码 了 可 以 通 EE 
过 邮箱 找 回 ， 若 多 此 一 举 让 用 户 填写 两 次 反而 更 
容易 导致 用 户 流 失 ， 如 图 6-63 所 示 。 


Name and Surname 





信息 化 注册 提示 。 Te 

为 终端 用 户 提供 有 效 的 信息 提示 是 用 户 体验 设计 中 的 最 好 方式 ， 尤 其 是 在 用 户 注 册 填 
写 信 息 具 有 多 个 输入 域 ， 而 在 需要 填写 的 字段 互相 之 间 可 能 会 产生 歧义 的 时 候 ， 这 些 消息 
提示 可 以 减少 用 户 的 思考 和 猜测 时 间 。 提 示 信 息 的 展现 形式 有 多 种 ， 可 以 在 页 面 的 顶部 闪 
烁 小 便签 ， 或 是 让 隐藏 起 来 的 消息 以 气泡 框 的 形 跳出 。 

设计 表现 赋予 注册 表单 以 特质 ， 而 界面 设计 正 是 用 户 所 感受 到 的 体验 。 更 多 的 提示 可 
以 防止 用 户 因 为 输入 错误 而 需要 进行 再 次 输入 ， 如 图 6-64 所 示 。 


User Name * 


AnyForWeb 


Password * 


Confirm Password * 


Please confirm your password 六 


Email* 


Enter Your emai 





6-64 信息 化 注册 提示 
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在 进行 APP 界面 的 制作 之 前 需要 进行 准备 与 规划 工作 ， 包 括 素 
材 准 备 、 界 面 布局 规划 、 确 定 风格 与 配色 。 


JIE) 索 材 准备 


在 设计 之 前 可 以 参考 同类 APP， 在 已 有 的 社交 APP 中 最 火爆 、 下 载 最 多 的 是 腾讯 旗 
下 的 QQ 和 微 信 。 不 论 是 哪个 社 APP， 必 定 会 有 交友 功能 ， 每 个 好 友 都 有 不 同 的 头像 ， 
因此 需要 准备 的 素材 之 一 为 头像 素材 ， 如 图 7-1 所 示 。 








2 


图 7-1 头像 素材 


男 外 ,好友 发 表 的 图 文 动态 需要 准备 图 片 素材 , 然后 是 用 户头 像素 材 ， 如 图 7-2 所 示 。 





CDB 界面 布局 规划 


一 款 社 交 类 APP 最 基 
本 也 是 最 主要 的 是 具备 即时 
聊天 功能 ， 除 此 之 外 ， 还 包 
括 好 友 动 态 界 面 、 用 户 登 录 
界面 等 。 本 实例 主要 设计 的 
是 登录 界面 、 聊 天 界面 、 个 
人 中 心 界面 和 侧 边 菜单 界 
面 。 首 先 对 4 个 界面 的 布局 
进行 规划 ,确定 大 致 版 式 ， 
方便 后 面具 体内 容 的 添加 ， 
如 图 7-3 所 示 。 
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Ei 


图 7-2 素材 


状态 栏 、 标 题 栏 
状态 栏 、 标 题 栏 





用 户头 像 


聊天 界面 


登录 信息 


登录 按钮 
输入 框 


注册 界面 聊天 界面 








状态 栏 、 标 题 栏 








状态 栏 


个 人 信息 


“ 主 界面 ” 
区 域 


动态 列表 


列表 菜单 


“退出 ”按钮 


好 友 动 态 界面 侧 边 菜单 界面 


图 7-3 界面 布局 规划 


(HB 确定 风格 与 配色 


本 实例 的 社交 APP 风格 定位 为 小 清晰 。 选 用 的 主 色调 为 紫色 。 紫 色 是 一 个 鲜 活 且 有 
趣 的 颜色 , 如 图 7-4 所 示 。 在 很 多 APP 中 都 会 见 到 紫色 的 应 用 , 这 里 可 以 借鉴 它们 的 配色 ， 
如 图 7-5 所 示 。 本 实例 用 莫 衣 草 紫 作为 主 色调 ， 搭 配 白色 和 灰色 进行 调和 ， 正 好 符合 小 
清新 的 是 位， 然后 使 用 不 同 明暗 的 灰色 区 分 来 主 次 ， 如 图 7-6 所 示 。 


重重 重生 二 BNIZON 二 


于 | ddYV 料 壮 产 


Welcome to Skim 


| 


VOU read them, then they re gone 


forever. With Skim, you can have 


fun and feel secure. 


Es Sign in with Twitter 
四 Sign in with Facebook 


图 7-4 紫色 7-5 应 用 紫色 的 APP 
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Photoshop 热门 伸 PP 类 型 设计 从 入 门 到 精通 





主 色调 





调和 色 





图 7-6 配色 


界面 制作 人 {F 


下 面 开 始 社 交 APP 的 界面 制作 ， 包 括 注册 界面 、 聊 天 界面 、 
好 友 动 态 界面 和 侧 边 菜单 界面 。 





Fp ln 


IE 注册 界面 


注册 界面 主张 简单 明了 ， 主 次 使 人 一 目 了 然 ， 能 使 用 户 快 速 完 成 注册 。 


设计 思 中 8 
本 实例 制作 的 注册 界面 主要 采用 紫色 和 灰色 搭配 。 注 册 信 息 区 使 用 矩形 进行 分 隔 ， 清 
晰 明了 ; 注册 按钮 位 于 底部 ， 使 用 了 紫色 ， 从 灰色 背景 中 突出 。 大 尺寸 设计 可 以 方便 用 户 
点 击 ， 制 作 流 程 如 图 7-7 所 示 。 


图 7-7 制作 流程 

















2 








会 
有 又 
制作 步骤 
知识 点 新 建 参 考 线 、 剪 贴 蒙 版 、“ 椭 圆 工具 ”“ 圆 角 和 矩形 工具 ” 
光盘 路 径 第 7 章 \7.2.1 注册 界面 


OF 新 建文 档 , 尺寸 为 640 x 1136 像 素 ,为 画布 填充 灰色 。 使用“ 适 形 工具 ”绘制 矩形 ， 
/ eI SU i 
O02 执行 “视图 ”| “新 建 参考 线 ” 命 令 ， 弹 出 对 话 框 ， 选 择 “ 水 平 ” 单 选 按钮 ， 设 
置 “ 位 置 ” 参 数 为 40 像素 ， 如 图 7-9 所 示 。 
7A) 单 击 “ 确 定 ” 按 钮 。 在 参考 线 上 方 绘制 状态 栏 中 的 图 形 ， 并 输入 文字 ， 如 
7 图 7-10 所 示 . 












取向 
各 水 平 (H) 


”eeeoo 中 国 移动 令 4:21 PM 





已 毒 直 (V) 
位 二 (PJ): 40 像素 





于 | ddYV 料 壮 产 


7-8 绘制 矩形 7-9 “新 建 参考 线 ” 对 话 框 7-10 绘制 图 形 并 输入 文字 


0 A 继续 绘制 图 形 并 输入 文字 ， 如 图 7-11 所 示 。 使 用 “椭圆 工具 ”绘制 椭圆 ， 然 后 
使 用 “钢笔 工具 ”绘制 图 形 ， 并 创建 剪贴 莹 版 ， 图 像 效 果 如 图 7-12 所 示 。 
4 而 使 用 “ 圆 角 矩形 工具 ”绘制 圆 角 珑 形 ， 复 制 多 个 并 进行 对 齐 与 垂直 居中 排列 ， 

如 图 7-13 所 示 。 


*9900 中 国 移动 令 4:21 PM 








7-11 绘制 图 形 并 输入 文字 图 7-12 图 像 效 果 7-13 绘制 圆 角 抵 形 并 复制 多 个 
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D 热门 做 PP 类 型 设计 从 入 门 到 精通 


D 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 图 7-14 所 示 。 使 用 “ 圆 角 和 矩形 工具 ”在 下 
方 绘制 圆 角 短 形 ， 然 后 输入 文字 ， 完 成 注册 界面 的 制作 ， 如 图 7-15 所 示 。 


*990 中 国 移动 全 4:21 PM nL *e900 中国 移动 全 4:21 PM 


《 《 


立即 注册 


7-14 输入 文字 7-15 完成 制作 


(CEB 聊天 界面 


聊天 界面 是 最 重要 的 界面 ， 既 要 与 众 不 同 ， 又 不 能 过 于 花哨 ， 否 则 不 利于 用 户 体验 。 


-设计 思路 


和 对 消息 的 时 间 进 行 分 割 ， 
使 得 信息 一 目 了 然 。 图 标 使 用 简单 的 线性 图 标 ， 束 个 界面 简洁 明了 ， 制 作 流程 如 图 7-16 
所 示 。 


eeeo0 中 国 移动 他。 4:21 PM 


Abby 








e900 中 国 移动 全 村 21 PM ， e9900 中 国 移动 全 4:21 PM 
Abby 





7-16 制作 流程 
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”每 
制作 步 又 
TIRE “可 工具 ，、 关 5 区 反 图 层 样式 
”x 用 之 722 阮 天 界面 


OF 新 建 空白 文档 ， 将 “登录 界面 ”文档 中 的 多 个 图 层 抑 入 当前 文档 ， 如 图 7-17 

Wa 

0 SD 使 用 绘图 工具 绘制 图 形 ， 并 输入 文字 ， 如 图 7-18 所 示 。 使 用 “椭圆 工具 ”绘制 
=- 一 ” 正 圆 ， 添 加 素材 并 创建 剪贴 蒙 版， 图 像 效 果 如 图 7-19 所 示 。 



























eee00 中 国 移动 合 4:21 PM 


eeeoco 中 国 移动 令 4:21 PM 


Abby 


于 | ddYV 料 壮 产 





7-17 拖 入 “登录 界面 ” 7-18 绘制 图 形 并 输入 文字 7-19 图 像 效 果 
文档 中 的 图 层 


A) 使 用 “ 圆 角 珑 形 工 具 ” 绘 制 圆 角 短 形 ， 使 用 “ 自 定 形状 工具 ”绘制 三 角形 ， 如 
图 7-20 所 示 。 
LA 双击 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ,设置 “投影 ”图 层 样式 ， 如 图 7-21 所 示 。 


eeeoo 中 国 移动 倒 4:21 PM 


ee 

一 投影 
结构 
混合 模式 (6): 正片 到 底 ~ 到 
不 透明 度 (0): 7s 一 30  % 


角度 (3): 人 | 0 度 回 使 用 全 局 光 (G) 




















距离 D0): CT 0 像素 
扩展 R): .一 0 % 
大 小 人) 9 5 起 妻 





























图 7-20 绘制 图 形 7-21 设置 “投影 ”图 层 样 式 
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LO 


eeeoo 中 国 移动 令 


4:21 PM 


Abby 


Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 


人 单 击 “确定 ”按钮 关闭 对 话 框 ， 
此 时 的 图 像 效 果 如 图 7-22 所 示 。 


eeeoo 中 国 移动 令 


7-22 图 像 效 果 


复制 图 层 ， 


0O7 


0 A 使 用 “ 横 排 文 字 工具 ”输入 文字 ， 
如 图 7-23 所 示 。 


4:21 PM 


Abby 





7-23 输入 文字 


对 图 形 进行 水 平 翻转 ， 并 替换 索 材 图 ， 修 改 文字 ， 如 图 7-24 所 示 。 
使 用 “ 横 排 文字 工具 ”输入 文字 ， 并 使 用 “直线 工具 ”绘制 线条 。 为 线条 图 层 


9 “投影 ”图 层 样 式 ， 如 图 7-25 所 示 。 添 加 后 的 效果 如 图 7-26 所 示 。 


eeeoo 中 国 移动 令 4:21 PM 


Abby 


(六 明天 放假 出 去 玩 ? 约 上 小 伙伴 们 一 起 
个 餐 逛 个 街 .. 





7-24 复制 并 修改 


08 用 同样 的 方法 ， 复 制 并 修改 图 形 ， 效 果 如 图 7-27 所 示 。 使 用 “矩形 工 





一 投影 


eeeoo 中 国 移动 令 


4:21 PM 





结构 











混合 模式 (6): 正常 -| 
不 透明 度 (0)， 一 一 zs 一 % 
角度 (A): | | 一度 问 使 用 全 局 光 (G) 
本 


距 高 D): 一 一 一 一 2 像素 
扩展 QR): == 0 % 
大 小 (S): < 0 像素 




















Abby 








56 分 钟 前 








图 7-25 添加 “投影 ”图 层 样式 


7-26 添加 后 的 效果 


具 ” 绘 抽 


人 7 论 形 ， 并 为 图 层 添加 “ 投 影 ” 图 层 样 式 ， 如 图 7-28 所 示 。 确 定 操作 后 的 图 像 效 


果 如 图 7-29 所 示 。 


ee2 中 国 移动 含 4:21 PM 


图 7-27 复制 并 修改 图 形 
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投影 











结构 

混合 模式 (6): 正常 ~ 

不 透明 度 (O): ES 75 
角度 内: | 上】 50 度 使 用 全 局 (6) 
扩展 R): CS 0 % 
大 小 (S): CO 0) 像素 



































图 7-28 添加 “投影 ”图 层 样式 


se 中 国 移动 令 4:21 PM 


Abby 





7-29 图 像 效 果 








LO 使 用 “ 答 形 工具 ”绘制 算 形 并 7 使 用 “ 横 排 文字 工具 ”输入 文 
使 用 绘图 工具 绘制 其 他 图 形 ， 字 , 完成 制作 , 如 图 7-31 所 示 。 
如 图 7-30 所 示 。 


e9900 中 国 移动 令 本 21 PM 


md 





7-30 绘制 图 形 7-31 完成 制作 


(CE 好 友 动 态 界面 


好 友 动 态 界面 是 指 显 示 好 友 发 布 动态 的 界面 ， 包 括 文字 动态 和 图 片 动态 。 


设计 思路 


本 实例 制作 的 是 好 友 动 态 界面 ， 以 列表 形式 展示 动态 。 除 了 好 友信 息 与 发 布 时 间 外 ， 
个 动态 下 添加 两 个 图 标 : “点 赞 ” 和 “评论 ”， 以 方便 互动 ， 制 作 流 程 如 图 7-32 所 示 。 


于 | ddYV 料 壮 产 





灵感 来 了 ， 挡 都 挡 不 住 ..… 


Oe S284 


新 鲜 出 护 的 美食 ， 快 来 力 呵 ! 1 1 
十 贱 诗 沦 

OO 1141 © 452 

7 请 叫 我 包子 





图 7-32 制作 流程 
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Photoshop 热门 全 PP 类 型 设计 从 入 门 到 精通 
TE 








同 / 制作 步 双 


知识 点 剪贴 蒙 版 、 图 层 填充 、 图 层 样式 
光盘 路 径 第 7 章 \7.2.3 好 友 动 态 界面 


0 7 将 “聊天 界面 ”另存 为 “好 友 动 态 界面 ”。 删除 除 状态 栏 、 标 题 栏 外 的 所 有 图 层 ， 
ee es 

0 人 7 使 用 “ 情 国 工具 ”绘制 正 国 ， 添 加 头像 素 村 并 创建 剪贴 莹 版， 然后 绘制 图 标 痊 
-一 ”入 文字 ,图 像 效果 如 图 7-34 所 示 。 使 用 “矩形 工具 ”绘制 矩形 ， 如 图 7-35 所 示 。 
















































































图 7-33 修改 效果 图 7-34 图 像 效果 7-35 绘制 矩形 
ZJ 添加 素材 图 片 并 创建 剪贴 蒙 版 。 使 用 “ 竹 形 工具 ”再 次 绘制 矩形 ， 并 创建 前 
贴 莹 版， 图 像 效 果 如 图 7-36 所 示 。 
0 A 设置 图 层 “ 填 充 ” 为 0%， 为 图 层 添 加 “渐变 芋 加 ”图 层 样式 ， 如 图 7-37 所 示 。 











新 变 亚 加 
条 变 
混 言 模式 (0): 正常 ~ 辣 仿 色 
不 透明 度 企 ): : PT 69 % 
靳 变 ; 友 向 人 R) 
样式 人): 野性 ~ 回 与 图 层 对 齐 () 
前 度 (N): ‘ : ) 30 度 
rE - 100 中 
| 设置 为 黑 认 值 | | 复位 为 默认 值 | 














7-36 图 像 效 果 7-37 添加 “渐变 释 加 ”图 层 样 式 
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O05 | A 和 “确定 ”按钮 后 使 用 “ 横 AAA 使 用 绘图 工具 绘制 图 形 ， 然 后 
7 排 EL do A Se Nr A 4 PN de 9 PN 
图 7-38 所 示 。 








点 更 评论 
3164 © 264 
图 7-38 输入 文字 图 7-39 绘制 图 形 并 输入 文字 


(pm rn 单 击 和 鼠标 右键 ,选择 “从 图 层 建 立 组 ”命令 。 然 后 复制 组 ， 
进行 修改 ， 完 成 制作 ， 如 图 7-40 所 示 。 


再 . 
seme*” 


ml 


NN ddv is 


新 鲜 出 护 的 美食 ， 快 来 吃 呵 ! 1 1 
所 汕 sy : 

OO fta1 全) 452 

7 博 叫 我 包子 


图 7-40 完成 制作 





(CE 侧 边 菜单 界面 


侧 边 菜单 是 通过 点 击 左 上 角 或 右上 和 角 的 图 标 展开 的 菜单 界面 。 








本 实例 制作 的 侧 边 菜单 界面 使 用 主 色 紫 色 和 暗色 进行 搭配 ， 这 种 搭配 是 非常 高 档 的 ， 
并 且 很 受 大 众 的 喜欢 。 上 暗色 背景 为 头像 的 放大 模糊 效果 ， 这 样 设计 色彩 柔和 ， 左 侧 的 莱 单 
界面 使 用 暗色 后 ， 更 加 凸显 白色 的 文字 信息 ， 便 于 阅读 。 制 作 流 程 如 图 7-41 所 示 。 





229 








eeeoo 中 国 移动 会 4:21 PM 


9ee25 中 国 移动 邻 4:21 PM % ' eeeo0 中 国 移动 仿 4:21 PM 


花 的 旋律 


编辑 个 性 签名 
a 





3 
1356 





个 性 装扮 
聊天 设置 
我 的 文件 
我 的 收藏 











网 络 设置 
大 面 


























图 7-41 制作 流程 
制作 步 双 


知识 点 “高 斯 模糊 ” 滤 镜 、 图 层 样式 
光盘 路 径 第 7 童 \7.2.4 侧 边 菜单 界 下 


OF 1 A 新 建文 档 ， 拖 入 素材 图 作为 背景 ， 如 图 7-42 所 示 。 执 行 “ 滤 镜 ”| “模糊 ”|“ 高 
斯 模糊 ”命令 ， 在 弹出 的 对 话 框 中 设置 “半径 ”参数 ， 如 图 7-43 所 示 。 为 图 层 
添加 Ne 1” 站 如 图 7-44 所 示 。 


















































颜色 要 加 

四 颜色 
混合 模式 (6): 正常 - 国 
不 透明 度 (0): 画 一 % 








|_ 设置 为 默认 值 。] | 复位 为 默认 值 

















日 i100% 


半径 (R): 像素 





























”图 7_42 拖 入 素材 由 图 7-43 设置 “半径 ”参数 图 7-44 添加 “颜色 到 加 ”图 层 样 式 
0 单 击 “ 确 定 ” 按 钮 后 的 图 像 效 果 如 图 7-45 所 示 。 在 状态 栏 中 绘制 图 形 并 输入 文 
Fr 字 ， 如 图 71-406 ei 
L17 将 “好 友 动 态 界 面 .psd” 打 开 ， 盖 印 所 有 图 层 ， 将 盖 印 的 图 层 拖 入 本 文档 中 ， 
7 并 创建 智能 对 象 ， 调 整 大 小 ， 图 像 效果 如 图 7-47 所 示 。 
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eeecc 中 国 移动 他 4:21 PM E21 PM 








图 7-45 图 像 效果 图 7-46 绘制 图 形 并 输入 文字 图 7-47 图 像 效 果 


使 用 “椭圆 工具 ”绘制 正 圆 ， 添 加 素材 并 创建 剪贴 蒙 版 。 使 用 “ 横 排 文字 工具 ” 
输入 文字 , 图 像 效 果 如 图 7-48 所 示 。 继 续 绘制 图 形 , 并 输入 文字 ,如 图 7-49 所 示 。 


eeeoo 中 国 移动 全 4:21 PM eeeoo 中 国 移动 仿 4:21 PM 


- 花 的 旋律 Ber 花 的 旋律 
“编辑 个 性 签名 ” 有 “编辑 个 性 签名 ” 








图 7-48 图 像 效 果 图 7-49 绘制 图 形 并 输入 文字 


使 用 “直线 工具 ”绘制 线条 ， 如 图 7-50 所 示 。 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
如 图 7-51 所 示 。 使 用 “ 圆 角 算 形 工具 ”绘制 圆 角 和 矩形， 并 输入 文字 ， 完 成 制作 ， 
如 图 1-52 所 示 。 


eeeoo 中 国 移动 仿 4:21 PM eeeoo 中 国 移动 令 4:21 PM 


BS 花 的 旋律 | ) 花 的 旋律 一 
: ' 编 辑 个 性 签名 ” | 编辑 个 性 签名 


六 pe S) [eg, oa 
点 娃 向 丝 村 | 点 外 关注 
168 1356 | 168 1356 


eeeoo 中 国 移动 令 4:21 PM 


花 的 旋律 
编辑 个 性 签名 ” 


点 性 时 
168 1356 





个 性 装扮 
聊天 设置 
我 的 文件 | 
我 的 收藏 


个 性 装扮 
聊天 设置 
我 的 文件 
我 的 收藏 


网 络 设置 | | 


网 络 设置 
| 天 十 

















图 7-50 绘制 线条 图 7-51 输入 文字 图 7-52 完成 制作 





更 哆 ZU Photoshop 热门 命 PP 类 型 设计 从 入 门 到 精通 
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(正史 APP ul 设计 中 需要 注意 的 间 题 一 一 一 一 一 一 一 一 一 一 一 一 

下 面 从 用 户 的 角度 来 介绍 APP UI| 设计 中 需要 注意 的 问题 。 

所 APP UI 关注 用 户 的 操作 习惯 

APP UI 关注 的 不 单单 是 界面 上 要 设计 得 多 美观 的 问题 ， 还 要 关注 用 户 的 操作 习惯 问 
题 ， 如 图 7-53 所 示 。 例 如 ， 大 多 数 用 户 拿手 机 的 时 候 是 单 手 操作 还 是 双手 操作 ? 当 进 行 
单 手 操 作 的 时 候 是 习惯 用 左手 还 是 右手 ?点击 按钮 的 时 候 是 用 左手 还 是 右手 ? 考虑 到 这 些 
有 利于 避免 用 户 用 手指 操作 时 触摸 到 在 APP 上 出 现 的 触摸 盲点 。 此 外 ， 用 户 的 操作 习惯 
还 决定 着 APP 的 界面 和 按钮 分 布 ， 只 有 符合 用 户 操作 习惯 的 界面 才能 给 用 户 更 好 的 体验 。 







单 手 拇指 
很 难 到 达 


很 容 多 到 达 


图 7-53 APP UI 关注 用 户 的 操作 习惯 

[多 要 充分 考虑 APP 的 使 用 环境 

每 款 APP 都 有 自己 的 用 户 定位 ， 用 户 定位 往往 决定 了 用 户 的 使 用 环境 。 包 括 这 款 
APP 的 用 户 使 用 时 间 、 地 点 、 环 境 等 。 如 果 用 户 在 使 用 这 款 APP 的 时 候 大 多 数 是 在 比较 
嗜 杂 的 环境 中 ， 那 么 APP 在 功能 上 就 应 该 帮助 用 户 克 服 这 个 问题 。 比 如 ， 使 用 公交 查询 
软件 ， 一 般 都 是 在 公交 站 或 者 马路 旁边 等 车 的 时 候 打 开 ， 这 个 时 候 就 不 应 该 在 APP 中 使 
用 类 似 语言 输入 进行 查询 的 功能 ， 否 则 会 给 用 户 的 语言 输入 币 来 误差 。 如 果 APP 是 一 款 
用 户 一 般 是 在 拥挤 的 环境 下 进行 操作 的 软件 ， 那 么 APP 就 应 该 避免 用 户 过 多 地 打字 ， 而 
可 以 使 用 其 他 输入 方式 来 代 蔡 文字 输入 。 

站 尽量 减少 APP 的 访问 级 别 

在 移动 终 疡 上 ， 如 果 有 太 多 的 访问 级 别 会 使 用 户 失去 耐心 ,最终 可 能 放弃 产品 的 使 用 。 
如 果 APP 的 访问 级 别 过 深 ， 可 以 考虑 使 用 局 平 化 的 层级 结构 ， 例 如 使 用 选项 卡 之 类 的 方式 
来 减少 访问 级 别 ， 以 及 使 用 弹出 菜单 的 方式 来 让 用 户 访问 更 深 级 别 的 内 容 ， 如 图 7-54 所 示 。 
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图 7-54 使 用 菜单 来 访问 更 深 级 别 的 内 容 


辐 APP 功能 设计 要 分 清 主 次 


APP 设计 同样 也 可 以 采用 管理 学 上 的 二 八 定 律 ， 也 就 是 将 主流 用 户 最 重要 、 最 常用 的 
20% 的 功能 进行 直接 展示 ， 而 将 其 他 80% 的 功能 适当 隐藏 ， 可 以 把 不 常用 的 功能 设置 为 


更 深 的 级 别 。 


微 信 发 送 的 消息 在 该 应 用 离线 的 情况 下 会 显示 感叹 号 保存 在 客户 站 ， 网 络 连接 后 只 
点 击 重新 发 送 即 可 ， 不 需要 重新 输入 信息 ， 如 图 7-55 所 示 。 新 痕 微 博 在 网 络 信号 和 兰 或 者 
中 断 的 情况 下 进行 评论 或 者 转发 ， 相 应 的 信息 内 容 也 会 自动 保存 在 微 博 的 草 
操作 一 下 即 可 。APP 有 具备 这 种 功能 的 优点 在 于 ， 如 果 没 有 保存 用 户 花 了 心思 创作 出 来 的 文 
字 ， 那 么 一 旦 应 用 处 于 离线 的 状态 内 容 就 会 丢失 ， 用 户 又 需要 再 次 输入 ， 既 浪费 时 间 ， 又 


浪费 用 户 的 劳动 成 果 。 
EDT Mle 


《 微 信 全 


ee 

人 “本 
Re 

0 Eo 
9 mm 
请 = 

加 aa 
二 人 

所 起 


2) | 十 
图 7-55 微 信 的 消息 发 送 失败 





人 


上 网 后 


| 


于 | ddV 炎 池 说。 
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Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 


@ 国 尽 可 能 地 减少 用 户 输入 ， 必 要 的 
时 候 应 给 出 相关 提示 

APP 是 运行 在 移动 终端 上 面 的 ， 用 户 
的 操作 会 受到 屏幕 尺寸 大 小 的 限制 ， 并 不 请 打开 GPS 开关 
能 像 在 PC 端 一 样 流畅 地 进行 打字 。 所 以 ， 
APP 在 相关 的 功能 上 应 该 尽 可 能 地 减少 用 
户 的 文字 输入 ， 如 图 7-56 所 示 是 使 用 百度 
地 图 时 ， 选 择 初 始 地 理 位 置 时 给 出 的 相关 
提示 效果 。 


a PS 开关 ， 即 可 获得 精准 定位 服 


不 再 显示 此 内 容 


取消 





图 7-56 相关 提示 


CI 平面 设计 师 如 何 苇 为 APP ul 设计 师 

随 着 移动 互联 网 产业 的 高 速 发 展 , APP U| 设计 师 也 成 为 人 才 市 场 上 十 分 紧俏 的 职业 。 
很 多 相关 行业 的 设计 师 也 都 纷纷 转行 ， 下 面 介绍 平面 设计 师 如 何 转 为 APP UI 设计 师 。 

《网 软件 的 熟练 运用 

由 于 平面 设计 师 平 时 做 广告 、 海 报 、 宣 传 册 等 类 型 的 东西 比较 多 ， 所 以 lllustrator 软 
件 运用 得 应 该 是 相当 的 熟练 的 。 而 在 进行 APP Ul 设计 的 时 候 可 以 使 用 lllustrator 来 做 矢 
量 的 图 标 ， 因 为 APP 图 标的 设计 尺寸 比较 多 ， 所 以 使 用 lllustrator 做 矢量 的 图 标 十 分 方便 
后 期 的 运用 。 

进行 APP 界面 设计 的 时 候 ， 运 用 最 多 的 是 Photoshop， 包 括 设计 APP 元 素 、 界 面 效 
果 图 及 切片 等 。 

加 相关 理论 的 学 习 

首先 需要 了 解 APP 涉及 的 平台 有 Android、iOS、iPad 等 。 明 确 各 个 平台 的 尺寸 大 小 。 
然后 是 APP 界面 元 素 、 界 面 的 布局 、 配 色 等 理论 。 

& 汪 模仿 优秀 产品 界面 

学 习 理 论 知 识 后 , 就 需要 进入 到 APP UI 设计 的 状态 中 , 初期 可 以 进行 优秀 作品 的 临 莫 ， 
逐渐 了 解 与 熟悉 相关 的 操作 。 对 APP 的 启动 界面 、 主 界面 、 列 表 界 面 、 设 置 界面 、 注 册 
登录 界面 等 进行 一 一 的 模仿 练习 ， 从 而 加 深 对 APP 设计 的 理解 。 

人 加 在 练习 中 掌握 APP UI 的 精髓 

试 着 设计 出 自己 的 APP 界面 ， 从 用 户 角度 、 体 验 角度 进行 设计 ， 慢 慢 掌 握 APP UI 的 
精通 ， 设 计 出 优秀 的 APP。 
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设计 准备 与 规划 


Ko | 在 开始 制作 一 款 APP 前 需要 很 长 一 段 时 间 的 准备 工作 ， 包 括 
«| 收集 素材 ， 从 素材 中 找寻 灵感 ， 对 界面 进行 布局 规划 ;根据 APP 


风格 选择 相应 的 配色 。 一 切 准 备 就 绪 后 ， 才 能 在 制作 中 得 心 应 手 。 





\ JI 蕊 各 索 材 准备 
购物 类 APP 比较 有 代表 性 的 有 淘宝 、 天 猫 、 唯 品 会 、 和 泵 东 等 。 
以 给 设计 师 市 来 灵感 ， i 8-1 所 示 。 


仅 限 紧急 呼叫 
中 国 移动 46 


这 些 代表 性 的 IAPPI 可 
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图 8-1 参考 APP 


本 实例 是 购物 类 APP， 除 了 基本 的 头像 素材 外 ， 还 需要 准备 海报 、 商 品 等 素材 ， 如 
图 8-2 所 示 。 





图 8-2 准备 素材 


236 








(机 界面 布局 规划 


购物 类 APP 主 界面 是 最 重要 的 界面 ， 界 面 中 通 弟 会 包括 广告 信息 、 促 销 信 息 ， 以 及 
菜单 与 导航 等 。 本 实例 设计 的 购物 APP 对 3 个 界面 进行 制作 讲解 ， 分 别 为 购物 主 界面 、 
个 人 中 心 界面 和 侧 边 菜单 界面 。 首 先 对 3 个 界面 的 布局 进行 规划 ， 确 定 大 致 版 式 ， 方 便 后 


面具 体内 容 的 添加 ， 如 图 8-3 所 示 。 











状态 栏 、 标 状态 本 
题 栏 地 栏 
| — po 
"en 区 
”快捷 菜单 
列 
I ， 
音 
活动 区 
侧 边 菜单 $ 
一 导航 栏 一 一 导航 栏 
购物 主 界面 个 人 中 心 界面 侧 边 菜单 界面 


图 8-3 界面 布局 规划 


半 东 | 几 ddV 冰 运 疝 壕 叶 


CE 确定 风格 与 配色 


橙色 是 暖色 系 中 最 温暖 的 色彩 ,橙色 会 给 人 市 来 兴奋 感 ， 在 购物 类 APP 中 使 用 橙色 
可 以 吸引 冲动 型 买 家 。 橙 色 与 浅 绿色 和 浅 蓝 色相 配 ， 可 以 构成 最 啊 亮 、 最 欢乐 的 色彩 ， 如 
图 8-4 所 示 。 

本 实例 主 界 面 使 用 栖 色 作为 主 色调 ， 与 红色 搭配 ; 个 人 中 心 界 面 使 用 种 色 和 闭 监 色 搭 
配 ; 侧 边 菜单 界面 使 用 深 灰 色 ， 如 图 8-5 所 示 。 





图 8-4 橙色 与 蓝 色 搭配 
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Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 








图 8-5 本 实例 配色 


守 面 页 作 





确定 了 界面 的 布局 与 配色 ， 下 面 开 始 购物 APP 的 界面 制作 。 


SS 


(了 葬 和 风物 主 界面 


购物 主 界面 是 购物 类 APP 能 否 留 住 用 户 的 关键 界面 ， 由 于 购物 类 界面 需要 罗 诈 的 信 
县 比较 多 ， 既 要 丰富 、 吸 引 人 ， 又 要 整洁 、 有 次 序 。 如 果 主 界面 杂乱 ， 往 往 会 市 来 糟糕 的 
用 户 体验 。 





中 /设计 思路 


在 制作 本 实例 的 购物 主 界面 时 ， 首 先 将 界面 进行 划分 ， 状 态 栏 与 标题 栏 、 内 容 区 、 瓜 
部 导航 栏 ， 然 后 对 这 些 区 域 进行 内 容 绘 制 ， 制 作 流程 如 图 8-6 所 示 。 
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图 8-6 制作 流程 
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每 


FT 


知识 点 图 层 样 式 、“ 和 矩形 工具 ”“ 椭 圆 工具 ”“ 直 线 工 具 ” 等 
光盘 路 径 第 8 章 \8.2.1 购物 主 界面 


OF 新 建文 档 ， 文 档 尺 寸 为 640x1136 像 素 ， 如 图 8-7 所 示 。 设 置 前 景色 为 

#f1f2f4， 按 Alt+Delete 组 合 键 为 画布 填充 前 景色 ， 如 图 8-8 所 示 。 

0 2 使 用 “矩形 工具 ”绘制 两 个 答 形 ， 分 别 为 顶部 的 状态 栏 + 标题 栏 区 域 、 帮 部 的 
一。 导航 栏 区 域 ， 如 图 8-9 所 示 。 



































[新 建 
名 称 (N): 未 标题 -1 
预 设 (P): 自 定 MA 
大 小 (| - 存 倩 预 设 (5).…. 
宽度 (W): 640 像素 > 是 除 预 设 (D).… 
高 度 (H): 113g| 像素 - 
分 状 率 (R): 72 像素 /英寸 “ v 
颜色 模式 (M): RGB 颜色 v 8 位 
要 容 CcC): bd 
背景 内 容 (C): 白色 图 你 大 小 : 
人 高 级 2.08M 
颜色 配置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 方形 像素 ” 














图 8-7 新 建文 档 图 8-8 填充 画布 8-9 绘制 矩形 
I) 使 用 “矩形 工具 ”绘制 矩形 ， 作 为 海报 区 域 ， 如 图 8-10 所 示 。 继 续 使 用 “和 矩形 
wy 工具 ”绘制 矩形 ,设置 填 充 颜 色 为 白色 、 描 边 颜 色 为 #dcdcdc、 描 边 宽度 为 1 点 ， 
如 图 8-11 所 示 。 绘 制 状态 栏 中 的 图 形 ， 并 输入 文字 ， 如 图 8-12 所 示 。 


8-10 绘制 矩形 图 8-11 绘制 矩形 图 8-12 绘制 图 形 并 输入 文字 
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Photoshop 热门 傅 PP 类 型 设计 从 入 门 到 精通 


0 使 用 “ 横 排 文字 工具 ”输入 标题 ， 并 在 左右 两 侧 绘制 图 形 


Pr 





) 图 像 效 果 如 图 Sy 


O05 使 用 “椭圆 工具 ”绘制 填充 色 为 红色 的 正 圆 ， 并 为 图 层 添 加 “投影 ”图 层 样式 ， 





如 图 8-14 所 示 。 单 击 “ 确 定 ” 按 钮 后 的 图 像 效 果 如 图 8-15 所 示 。 


投影 
eeeoo 中 国 移动 仿 4:21 PM 100% 结构 4:21 PM 
混合 模式 B) 正片 又 底 -En 


三 折扣 商城 OO Me 
二 9 角度 :| 1 50 度 回 使 有 全 局 光 (G) 
距离 DO): 人 1 像素 
扩展 R: C= 一 0  % 
大 小 5): C= 一 0 像素 
品质 

等 高 线 : [A 口 湖人 可 丰 ， 

杂 色 (N): (二 = 0 % 
本 图 层 挖 空投 影 (J) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 















































图 8-13 图 像 效 果 8-14 添加 “投影 ”图 层 样式 


ec25 中 国 移动 令 4:21 PM 100% mm 


a /人 打开 海报 素材 ， 将 其 拖 入 文档 中 ， 创 建 剪 
- 贴 蒙 版 ， 如 图 8-16 所 示 . 
一 在 直方 使 用 “直线 工具 ”绘制 线段 ， 分 市 


"pp /人 0 
六 6 R00- 人 


36 
1/ 瑚 ， 
本 


大 = 
9 月 30 号 仅 限 一天 











100% (iW 


ge 


8-15 图 像 效 果 


.07 


上 不 封顶 才 


0) 
bd 


图 8-16 添加 素材 8-17 绘制 线段 


eeeoo 中 国 移动 令 421 PM 


CO 〇 使 用 绘图 工具 绘制 图 形 并 使 用 “ 横 排 文字 工 
(05 有 具 ”输入 文字 ， 如 图 8-18 所 示 。 
同 | | 卉 | 册 NI 向 | 后 ID 给 | 山中 EE 坟 o 
WA 图 8-19 所 示 . 





我 的 收藏 物流 查询 充值 大 礼包 


8-18 绘制 图 形 并 输入 文字 
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折扣 商城 





图 8-19 绘制 线段 








7 使 用 横 排 文字 输入 文字 ， 并 绘制 图 形 ， 如 图 8-20 所 示 。 添 加 素材 图 片 ， 并 绘制 
贺 角 矩形， 然后 输入 文学 ， 图 像 效 果 如 图 8-21 所 示 。 


eeeoo 中 国 移动 倒 4:21 PM 10090 国有 ) 


折扣 商城 (QO 


。 Y 
9 月 30 号 仅 限 一 天 


0. G2 


上 不 封顶 只 


El 加 本 | 


我 的 收藏 物流 查询 充值 


秒杀 倒计时 (3 [四 :四 :四 


图 8-20 输入 文字 并 绘制 图 形 


17 17 使 用 “直线 工具 ”绘制 线段 ， 并 使 用 “ 横 排 
文字 工具 ”输入 文字 ， 如 图 8-22 所 示 。 在 
底部 绘制 图 形 并 输入 文字 ， 作 为 导航 菜单 ， 完 成 效果 


如 图 8-23 所 示 。 


头条 专属 品牌 街 





图 8-22 绘制 线段 并 输入 文字 





eeeoo 中 国 移动 令 4:21 PM 10090 mw 


折扣 商城 (QO 
py Be | 
ok 60- 


上 不 封 项 和 * 


ol 


我 的 收藏 物流 查询 充值 


秒杀 倒计时 他 四 :四 :四 


dd 痰 < 


图 8-21 图 像 效 果 
工本 4:21 PM 


折扣 商城 


我 的 收藏 





秒杀 倒计时 地 加 :加 :图 


重生 下 


¥ 189.00 ¥ 102.00 ¥ 65.00 


7.9 折 





图 8-23 完成 效果 
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Photoshop 热门 铬 PP 类 型 设计 从 入 门 到 精通 


(IE 个 人 中 心 界面 


ON Si 4 NB NO I A A 





同 / 设计 思路 





本 实例 制作 的 是 个 人 中 心 界面 。 使 用 列表 将 重要 内 容 主 次 分 明 地 排列 ， 个 人 信息 区 辰 
部 使 用 可 以 谷 换 的 背景 图 ， 丰 富 界 面 ， 制 作 流程 如 图 8-24 所 示 。 


e55 中 国 移动 令 本 2 PM eeeoco 中 国 移动 令 4:21 PM 


他 个 人 中 心 | Ke 个 人 中 心 (9 








8-24 制作 流程 





制作 步 双 


知识 点 “矩形 工具 ”“ 椭 圆 工 具 ”、 图 层 不 透明 度 、 图 层 样 式 
光盘 路 径 第 8 章 \8.2.2 个 人 中 心 界面 


O07 将 主 界面 另存 为 “个 人 中 心 界 面 ”， 并 删除 多 个 图 层 ， 只 保留 顶部 和 底部 的 
区 域 。 对 标题 栏 中 的 文字 进行 修改 ， 并 删除 左 侧 的 图 标 ， 重 新 绘制 新 的 图 标 。 
(0 2 将 底部 导航 栏 中 的 图 标 和 文字 颜色 进行 修改 ， 修 改 后 的 效果 如 图 8-25 所 示 。 

=< 使 用 “和 矩形 工具 ”绘制 多 个 算 形 ， 确 定 不 同 的 区 域 ， 如 图 8-26 所 示 。 使 用 “ 直 
线 工具 ”绘制 线条 分 割 区 域 ， 并 绘制 前 关 ， 如 图 8-27 所 示 。 























图 8-25 修改 后 效果 图 8-26 绘制 矩形 图 8-27 绘制 线条 和 箭头 
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02 使 用 “ 横 排 文字 工具 ”输入 Ol 绘制 图 标 并 输入 文字 ， 如 


文字 ， 如 图 8-28 所 示 。 | 


我 的 订单 ’ 我 的 订单 
B 四 tO vy @ 
待 付 蒜 待 发 货 待 收 货 待 评价 退 球 /售后 
我 的 账户 ’ 我 的 账户 
我 的 积分 我 的 积分 
我 的 卡 券 包 我 的 卡 券 包 





图 8-28 输入 文字 图 8-29 绘制 图 标 并 输入 文字 


0 /大 添加 素材 图 片 ， 并 创建 剪贴 蒙 版 ， 如 图 8-30 所 示 。 在 图 片上 绘制 矩形 ， 设 置 图 
S 层 的 “不 透明 度 ” 为 30%， 如 图 8-31 所 示 。 


ecx 中 国 移动 令 4:21 PM 


个 人 中 心 


于 小 I 几 | ddV 痰 学 肚 司 宫 昌 





图 8-30 添加 素材 图 片 图 8-31 绘制 矩形 并 调整 “不 透明 度 ” 
O05 使 用 “椭圆 工具 ”绘制 正 国 ， 并 添加 素材 ， 创 建 黄 贴 莹 版 ， 如 图 8-32 所 示 ， 选 
(7 择 杭 加 图 层 ， 为 图 层 添加 “ 描 边 ”图 层 样 式 ， 如 图 8-33 所 示 ， 














eeeoo 中 国 移 动 令 4:21 PM 100% 古国 
大 小 (S): < 一 3 像素 
过 ) 个 人 中 心 (O 位 置 p): 外 部 ~ 
混合 模式 (6): 正常 ~ 
不 透明 度 (0): 10  % 
3 -一 一 = 
< 本 [填充 类 型 P): 颜色 ~ 
A ; 颜色 :| | 














复位 为 默认 值 





图 8-32 添加 素材 图 8-33 添加 “ 描 边 ” 图 层 样 式 
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O07 确定 操作 后 的 图 像 效果 如 CO 〇 使 用 绘图 工具 绘制 相机 图 标 ， 


pa GF | el 





eeeoo 中 国 移动 令 4:21 PM 100% i 


全 大 中 心 ge 





图 8-34 确定 后 效果 图 8-35 绘制 相机 图 标 
O09 使 用 “ 模 排 文字 工具 ”输入 文字 ， 并 使 用 “ 圆 角 乱 形 工具 ”绘制 国 角 矩形 ， 如 
图 @ GUT 
eeeoo 中 国 移动 仿 4:21 PM 10096 国王 


个 人 中 心 (Q 


2 





图 8-36 输入 文字 并 绘制 圆 角 和 矩形 图 8-37 绘制 线条 


i100) 使 用 “ 横 排 文字 工具 ”输入 文学 ， 完 成 界面 的 制作 ， 如 图 8-38 所 示 。 


eeeoo 中 国 移动 全 4:21 PM 


个 人 中 心 


收藏 的 店铺 走 过 的 正 迹 





图 8-38 完成 制作 
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ER 则 这 菜单 界面 


侧 边 菜单 界面 用 于 菜单 的 选择 ， 在 三 省 界面 的 同时 可 以 深 入 访问 。 





本 实例 制作 的 侧 边 菜单 界面 使 用 深 灰 色调 来 制作 ， 有 利于 文字 的 阅读 。 使 用 线性 图 标 ， 
和 其 他 界面 统一 ， 制 作 流 程 如 图 8-39 所 示 。 


ml | 
全 和 


~ 时 


1 应 











图 8-39 制作 流程 图 


制作 步骤 


新 建 参考 线 、 图 层 蒙 版 
第 8 章 \8.2.3 侧 边 菜单 界面 









































0 有 将 “个 人 中 心 界面 "另存 为 “ 侧 边 菜单 界面 ”, 删除 除 状态 栏 和 背景 外 的 所 有 图 层 。 
/ 将 画布 颜色 改 为 深 灰 色 ， 如 图 8-40 所 示 。 
新 建 参 考 线 ， 确 定 状 态 栏 和 侧 边 栏 的 区 域 。 打开 “购物 主 界 面 ” 文档， 按 
(02 Ctrl+Alt+Shift+B 组 合 键 盖 印 可 见 图 层 。 使 用 “移动 工具 ”将 盖 印 的 图 像 拖 入 
到 “ 侧 边 菜单 界面 ”中 ， 如 图 8-41 所 示 。 
L 为 图 层 新 建 图 层 蒙 版 ,使 用 “矩形 选 框 工具 ” 选择 参考 线 上 方 的 区 域 ， 填充 黑色 ， 
WU 如 图 8-42 所 示 ， 
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闻 现 In ddV 业 过 出 车 叶 下 名 9s 








全 


10090 WR 
ss900 中 国 移动 今 21 PM 











头条 专属 
PT 
苦 页 
8-40 修改 画布 颜色 8-41 添加 盖 印 图 8-42 添加 蒙 版 后 效果 


0 es 2 全 下 二 和 古 二 改口 鸭 | 列 
用 绘图 工具 绘制 图 标 ， 如 图 8-44 所 示 。 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 
图 8-45 所 示 。 


eeeco 中 国 移动 仿 421 PM eeeoo 中 国 移动 令 4:21 PM 100% (im) eeeoo 中 国 移动 令 4:21 PM 








秒杀 倒计时 人) 
/\ 


Co | 





头条 专属 头条 专属 
首页 首页 
本 me ee 有 | ee 站 可 本 站 
8-43 绘制 分 割 线 8-44 绘制 图 标 8-45 输入 文字 


使 用 “ 圆 角 矩形 工具 ”绘制 箭头 ， 如 图 8-46 所 示 。 复 制图 层 ， 修 改 颜 色 ， 并 使 
用 方向 键 调整 位 置 ， 如 图 8-47 所 示 。 
复制 多 个 箭头 ， 并 使 用 “和 矩形 工具 ”在 “首页 ”文字 下 绘制 一 个 填充 色 为 黑色 
的 撼 形 ， 完 成 制作 ， 如 图 8-48 所 示 。 









图 8-46 绘制 箭头 图 8-47 复制 并 修改 图 8-48 完成 制作 


2 









he ijl 


@2 
a 


下 面 将 APP UI 设计 的 相关 专业 知识 分 享 给 大 家 。 


一 下 APP 中 反馈 提示 的 设计 方法 


很 多 新 手 设计 师 不 懂 为 什么 要 反馈 。 以 人 与 人 的 交流 为 例 ， 在 人 与 人 的 交流 过 程 中 ， 
无 法 忍受 的 一 种 情况 是 ， 对 方 对 自己 说 的 话 没有 反应 ， 好 像 视而不见 。 没 有 反馈 或 是 不 友 
好 的 反馈 ， 就 好 像 冷 冰冰 的 人 一 样 ， 会 给 用 户 带 来 无 助 或 不 悦 的 负面 体验 。 

及 时 恰当 地 反馈 能 够 告诉 用 户 下 一 步 该 做 什么 ， 帮 助 用 户 做 出 判断 和 决定 。 

全 反馈 的 形式 

反馈 的 形式 多 样 ， 所 有 的 提示 都 应 该 在 恰当 的 时 候 出 现在 恰当 的 位 置 ， 用 简短 而 清晰 
的 文字 提供 有 用 的 信息 ， 不 让 用 户 产生 迷惑 。 

人 @ 气泡 状 提示 。 


通常 用 于 告诉 任务 状态 、 操 作 结 果 ， 短 暂 出 现在 画面 上 ， 就 像 气泡 一 样 过 一 会 
儿 就 会 自己 消失 ， 并 不 需要 对 它 进 行 任何 操作 


用 于 引导 ， 就 像 漫 画 中 的 对 话 框 一 样 ， 带 有 一 个 指向 具体 位 置 的 小 类 ， 提 示 用 
户 需 要 关注 哪个 位 置 。 与 用 处 一 不 同 ， 这 种 引导 类 提示 通常 不 会 很 快 消失 。 





不 足 之 处 是 容易 被 用 户 忽 略 ， 所 以 不 适合 承载 太 多 文字 或 重要 信息 。 
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Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 





弹出 框 。 


一 般 会 市 有 一 两 句 说 明文 字 和 两 个 操作 按钮 ， 用 于 确认 和 取消 重要 操作 ( 比如 ， 是 否 
删除 内 容 ) ， 通 常会 用 明显 的 颜色 ， 突 出 显示 可 能 造成 用 户 损 失 的 操作 项 ( 比如 ，“ 删 
NN (ae 

弹出 框 的 出 现 ， 会 强迫 用 户 关 注 弹 窗 的 内 容 和 操作 ， 并 屏 敬 背景 的 所 有 内 容 ， 会 对 用 
局 于 加 和 到 Ae 

弹出 杠 上 的 说 明 、 按 钮 上 的 文字 ， 最 好 言 简 意 败 、 一 目 了 然 ， 能 帮助 用 户 快 速 做 出 决 
策 。 因 为 通 章 用 户 都 想 赶快 关 掉 弹出 框 ， 以 便 接 痢 完 成 被 打 断 的 操作 。 设 计 过 程 中 要 避免 
滥用 弹出 框 提 示 ， 对 于 不 太 重 要 又 要 反馈 的 事 可 以 用 气泡 提示 表示 。 

@ 按钮 /图 标 / 超 链 接 的 按 下 状态 。 


这 是 基于 人 在 现实 生活 中 按 一 个 按钮 会 立即 有 按 下 状态 而 是 设计 的 。 当 用 户 在 屏 医 上 
按 下 一 个 按钮 或 超 链接 时 ,也 需要 有 状态 的 改变 , 让 用 户 知 道 界面 已 经 接收 到 他 的 操作 了 。 


声音 :比如 虚拟 键盘 在 按 下 时 的 味 只 声 ， 短信、 邮件 发 送 成 功 后 的 “ 嗅 ” 一 声 ; 
手机 微 信 “ 摇 一 摇 ” 之 后 的 味 咏 声 ; 拍照 APP 按 下 按钮 的 味 只 声 等 。 恰 当 使 用 
声音 反馈 有 点 睛 的 效果 ， 但 过 多 地 使 用 反而 会 变 成 一 种 打扰 。 因 此 ， 不 能 将 声 
音 作 为 主要 反馈 ， 且 要 给 用 户 关 闭 提 示 音 的 权利 (因为 用 户 所 处 的 环境 多 样 ， 
可 能 很 吵 而 听 不 见 声音 ， 也 可 能 不 适合 打开 声音 ) 。 


振动 : 这 是 一 种 比较 强烈 的 触 党 反馈 ， 可 用 来 代替 或 加 强 声 音 提示 。 在 手机 系 
统 中 应 用 广泛 ， 比 如 来 电 、 和 短信、 已 连接 充电 等 ， 在 手机 APP 中 较 少 用 到 。 
动画 : 给 用 户 提 供 有 意义 的 反馈 ， 儿 助 用 户 直观 了 解 操 作 的 结果 ; 精美 有 趣 的 
动画 ， 能 给 用 户 留 下 深刻 印象 、 提 升 使 用 时 的 愉悦 感 ， 甚 至 成 为 产品 吸引 用 户 
A 





iOS 系统 在 删除 邮件 、 照 片 时 ， 通 过 拟 物 化 的 动画 效果 ， 让 用 户 知道 操作 已 经 生效 。 
这 种 形象 的 动画 ， 可 以 帮助 用 户 清晰 地 感受 到 操作 的 执行 过 程 ， 并 增添 了 乐趣 。 

在 一 些 会 持续 比较 久 的 操作 里 ， 比 如 下 载 、 删 除 大 量 文件 ， 用 动态 的 进度 条 展示 已 完 
成 的 进度 ， 并 在 可 能 的 时 候 提供 解释 信息 ， 能 够 减少 用 户 的 焦虑 。 还 有 很 多 APP 中 添加 
有 趣 的 下 拉 刷 新 、 上 滑 加 载 的 例子 ， 可 以 让 等 待 不 再 枯燥 。 

0 反馈 的 内 容 

反馈 的 内 容 包 括 以 下 几 个 方面 : 

外 信息 。 

文字 信息 应 该 简洁 易 懂 ， 避 免 使 用 倒 装 句 ， 最 好 一 两 句 就 能 将 意思 表达 清楚 ， 避 免 使 
用 过 于 程序 化 的 语言 。 页 面 已 有 详细 说 明文 字 的 操作 ， 其 反馈 信息 可 以 简单 一 些 ， 不 必 重 
复 页 面 已 有 文字 。 比 如 昵称 ， 当 界面 上 已 有 格式 要 求 时 ， 反 馈 错误 时 只 需 提 示 “ 昵 称 不 符 
合 要 求 ” 即 可 。 适 当 使 用 图 标 ， 可 以 吸引 用 户 注 意 ， 帮 助 用 户 判 断 提示 的 类 型 。 
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警告 框 用 于 向 用 户 展示 对 使 用 程序 有 重要 影响 的 信息 。 和 警告 一 般 浮 现在 程序 中 央 ， 履 
蔓 在 主 程序 之 上 。 它 的 到 来 ， 是 由 于 程序 或 设备 的 状态 发 生 了 重要 变动 ， 并 不 一 定 是 用 户 
最 近 的 操作 导致 的 。 

通常 在 该 界面 上 至 少 有 一 个 按钮 ， 用 户 点 击 后 即 可 关闭 窗口 。 一 般 会 有 标题 ， 并 展示 
额外 的 辅助 信息 。 

人 错误 。 

提示 用 户 操 作出 现 了 问题 或 异常 ， 无 法 继续 执行 。 用 提示 反馈 告知 用 户 为 什么 操作 被 
中 断 ， 以 及 出 现 了 什么 错误 。 错 误 信 息 要 尽量 准确 、 通 俗 易 履 。 有 效 的 错误 提示 信息 要 人 解 
释 发 生 的 原因 ， 并 提供 解决 方案 ， 以 使 用 户 能 够 从 错误 中 恢复 。 

@ 确认 。 

用 于 询问 用 户 是 否 要 继续 某 个 操作 ， 让 用 户 进 一 
的 退路 。 当 用 户 的 操作 结果 较 危 险 或 不 可 逆 时 ， 通 过 

全 反馈 出 现 的 位 置 

反馈 信息 会 出 现在 手机 界面 中 的 哪些 位 置 ? 下 面 进行 介绍 。 


步 确认 ， 为 用 户 提供 可 反悔 、 可 撤销 
一 次 选择 和 确认 ， 防 止 用 户 误 操作 。 


状态 栏 : 在 状态 栏 中 出 现 能 很 好 地 利用 空间 。 但 是 位 置 不 是 很 明显 ， 建 议 只 提 
示 重 要 程度 不 高 或 有 跨 画 面 显示 需求 的 提示 。 

导航 栏 : 一 般 是 连接 状态 的 展示 ， 表 示 产 品 正 在 努力 连接 网 络 、 拉 取 数 据 中 ， 
适合 显示 临时 的 较 重 要 的 提示 类 信息 。 

内 容 区 上 方 : 位 置 在 内 容 区 上 方 、 导 航 栏 下 方 ， 通 常 为 下 拉 刷 新 ， 是 加 载 新 内 
容 的 一 种 快捷 方式 。 默 认 的 提示 信息 是 隐藏 的 ， 向 下 拉 界 面 时 才 显 示 对 应 的 提 
示人 信息， 以 引导 用 户 操作 。 

屏幕 中 心 通常 为 整体 性 的 比较 重要 的 信息 提示 ， 需 要 引起 用 户 重 视 的 内 容 、 系 
统 提 示 信 息 均 可 以 显示 在 此 位 置 。 

菜单 栏 上 方 可 根据 需要 灵活 地 使 用 ， 基 本 上 没什么 限制 ， 可 以 是 应 用 的 整体 信 
息 的 提示 ， 也 可 以 是 与 界面 底部 内 容 相关 的 提示 。 比 如 ， 加 载 更 多 内 容 或 气泡 
提示 表示 图 片上 传 中 等 。 

底部 ( 履 盖 菜单 栏 ) : 在 此 位 置 显 示 提 示 ， 并 没有 什么 特别 的 好 处 ， 或 许 是 对 
于 新 形式 的 一 种 追求 。 


有 反馈 的 设计 原则 


”为 用 户 在 各 个 阶段 的 反馈 提供 必要 、 积 极 、 及 时 的 反馈 
四 ”避免 过 渡 反 馈 ， 以 免 给 用 户 带 来 不 必要 的 打扰 ， 


能 够 及 时 看 到 有 效果 的 、 简 单 的 操作 ， 可 以 省 略 反馈 提示 。 
所 提供 的 反馈 ， 要 能 让 用 户 用 最 便捷 的 方式 完成 选择 。 
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Photoshop 热门 Opp 类 型 设计 从 入 门 到 精通 
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\C IE 加 问 敌 好 扁平 化 设计 

局 平 化 设计 的 特点 是 十 分 鲜明 的 ， 把 握 局 平 化 的 特点 才能 做 好 扁平 化 设计 。 

鸭 拒绝 特效 

局 平 化 设计 最 核心 的 概念 束 是 放弃 一 切 洲 饰 效果 ， 如 阴影 、 透 视 、 纹 理 、 新 变 等 能 做 
出 3D 效果 的 元 素 一 概 不 用 。 所 有 元 素 的 边界 都 干净 俐 沙 ， 没 有 任何 汉化、 渐变 或 者 阴影 。 
这 一 设计 趋势 极力 避免 任何 拟 物 化 设计 的 元 素 ， 这 导致 这 一 设计 风格 在 其 他 平台 有 时 候 显 
得 突 岂 ， 前 景 图 片 、 按 钮 、 文 本 和 导航 栏 与 背景 图 片 格格 不 入 ， 各 成 一 派 。 


因为 这 种 设计 有 着 鲜明 的 视 
允 效 果 ， 它 所 使 用 的 元 素 之 间 有 清 
晰 的 层次 和 布局 ， 这 使 得 用 户 能 
观 地 了 人 解 每 个 元 素 的 作用 及 交互 
方式 。 如 今 从 网 页 到 手机 应 用 无 
不 在 使 用 局 平 化 的 设计 风格 ， 尤 其 
是 在 手机 上 ， 因 为 屏 硕 的 限制 ， 使 
得 这 一 风格 在 用 户 体验 上 更 有 优 
势 ， 更 少 的 按钮 和 选项 使 得 界面 
干净 整齐 ， 使 用 起 来 格外 简单 ， 





噶 噶 巴士 发 起 定制 


哮 噶 巴士 .上 下 班 


噶 噶 巴士 :附近 


噶 嘲 巴士 旅游 大 巴 





如 图 8-49 所 示 。 图 8-49 拒绝 特效 
[23 界面 元 系 


局 平 化 设计 通常 采用 许多 简单 的 用 户 界 面 元 素 ， 如 按钮 或 者 图 标 之 类 。 设 计 师 们 通常 
坚持 使 用 简单 的 外 形 ， 如 和 矩形 或 者 圆 形 ， 并 且 尽 量 突出 外 形 。 这 些 用 户 界 面 元 素 方 便 用 户 
点 击 ， 这 能 极 大 地 减少 用 户 学 习 新 交互 方式 的 成 本 ， 因 为 用 户 赁 经 验 就 能 大 概 知道 每 个 按 
钮 的 作用 。 

此 外 ， 局 平 化 除了 简单 的 形状 之 外 ， 还 包括 大 胆 的 配色 。 但 是 需要 注意 的 是 ， 局 平 化 
设计 不 是 说 简单 地 使 用 形状 和 颜色 搭配 就 行 ， 它 和 其 他 设计 风格 一 样 ， 是 由 许多 的 概念 与 
方法 组 成 的 ， 如 图 8-50 所 示 。 





图 8-50 简单 的 用 户 界 面 元 素 
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图 优化 排版 

由 于 扁平 化 设计 使 用 特别 简单 的 元 素 ， 排 版 就 成 了 很 重要 的 一 环 ， 排 版 的 好 坏 直接 影 
响 视觉 效果 ， 甚 至 可 能 间接 影响 用 户 体验 。 

字体 是 排版 中 很 重要 的 一 部 分 ， 
和 其 他 元 素 相辅相成 。 一 款 花 体 字 
在 扁平 化 的 界面 里 会 显得 很 突 元 。 2 
如 图 8-51 所 示 是 一 些 扁平 化 网 站 使 -人 
用 无 衬 线 字体 的 例子 。 无 衬 线 字体 家 en 
族 庞大 ， 分 支 众 多 ， 其 中 有 些 字体 在 2 \ 
特殊 的 情景 下 会 有 意 想 不 到 的 效果 。 
但 注意 ， 过 犹 不 及 ， 不 要 使 用 那些 极 
为 生僻 的 字体 。 

@ 辆 惯用 明亮 的 配色 

在 扁平 化 设计 中 ， 配 色 和 貌似 是 最 
重要 的 一 环 ， 扁 平 化 设计 通常 采用 比 
其 他 风格 更 明亮 、 炫 丽 的 颜色 。 同 时 ， 
局 平 化 设计 中 的 配色 还 意味 着 更 多 的 
色调 。 比 如 ， 其 他 设计 最 多 只 包含 两 
三 种 主要 颜色 ， 但 是 扁平 化 设计 中 会 
平均 使 用 6 ~ 8 种 ， 如 图 8-52 所 示 。 图 8-52 更 多 的 色调 

而 且 ， 扁 平 化 设计 中 往往 倾向 于 
使 用 单 色调 ， 尤 其 是 纯色 ,并 且 不 做 
任何 淡化 或 柔 化 处 理 ， 最 受 欢迎 的 
颜色 是 纯色 和 二 次 色 。 另 外 ， 还 有 
一 些 颜 色 也 非常 受 欢迎 ， 如 复古 色 ， 
包括 浅 楼、 紫色 、 绿 色 、 蓝 色 等 ， 
如 图 8-53 所 示 。 

国 最 简 方 案 

设计 师 要 尽量 简化 自己 的 设计 方 
案 , 避免 不 必要 的 元 素 在 设计 中 出 现 。 
简单 的 颜色 和 字体 就 足够 了 ， 如 果 还 想 添加 一 些 内 容 ， 尽 量 选择 简单 的 图 案 。 扁 平 化 设计 
尤其 对 一 些 做 零售 的 网 站 帮助 巨大 ， 它 能 很 有 效 地 把 商品 组 织 起 来 ， 以 简单 但 合理 的 方式 
排列 。 
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图 8-51 优化 排版 








口 


2 





壮 池 | 几 | ddV 闫 尝 胶 伦 洱 包 



















“e o> 














议 计 准备 与 规划 


Gy 关于 这 个 实例 的 前 期 准备 与 规划 ， 主 要 是 收集 美食 素材 图 片 ， 
心 | 依据 美食 的 特点 ， 要 设计 出 精准 的 配色 方案 及 人 性 化 界面 。 





G 


EE 素材 准备 
本 实例 是 一 款 美 食 类 APP UI 设计 ， 在 图 片 方面 ， 由 于 对 象 相对 而 言 比 较 单一 ， 因 此 


在 界面 设计 的 过 程 中 ， 主 要 需要 收集 一 些 蔬 业 、 水 果 、 调 味 辅料 和 菜肴 成 品 图 ， 以 及 相关 
的 细 市 浪人 饰 即 可 ， 如 图 9-1 所 示 。 
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图 9-1 参考 素材 


项 界面 布局 规划 


作为 一 款 美 食 生 活 类 的 APP 系列 界面 ， 根 据 其 本 身 的 特点 ， 在 设计 中 需要 设计 出 一 
个 欢迎 局 动 界 面 和 三 个 不 同 功能 的 单 屏 界面 。 根据 相关 的 设计 要 来 和 规 沁 ,在 实际 操作 前 ， 
我 们 先 对 这 四 个 界面 进行 大 致 的 国 面 布局 与 界面 分 隔 ， 有 具体 如 图 9-2 所 示 。 


2503 








Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 




















手机 状态 栏 

导航 栏 
美食 图 片 

美食 图 片 








界面 信息 





个 人 中 心 界面 


9-2 界面 布局 规划 


QI 确定 风格 与 配色 


本 实例 是 一 款 关 于 美食 的 APP UI 设计 ， 在 配色 方面 应 当 多 使 用 一 些 能 够 刺激 用 户 食 
欲 ， 或 者 可 以 使 用 户 通过 整体 的 颜色 就 能 够 辨识 APP 类 别 的 颜色 ,例如 绿色 、 橙 色 、 黄 色 、 
米色 、 金 色 等 。 在 整体 的 界面 效果 上 ， 要 呈现 出 一 种 唯美 、 秀 色 可 和 餐 的 感觉 ， 刺 激 用 户 的 
味觉 ， 增 加 用 户 的 使 用 度 ， 从 而 增强 APP 的 实用 性 ， 这 是 设计 本 实例 的 最 大 意义 ， 具 体 
如 图 9-3 所 示 。 
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图 9-3 色彩 搭配 





在 收集 到 足够 的 素材 以 后 ， 根 据 已 经 构架 好 的 设计 思路 ， 从 
程序 欢迎 界面 开始 制作 这 款 美食 APP 的 界面 设计 。 在 设计 的 过 程 
中 ， 注 意 一 定 不 能 偏离 设计 好 的 框 染 ， 时 刻 注意 前 后 整体 的 风格 、 
颜色 、 结 构 ， 下 面 介绍 具体 的 制作 方法 。 


EPE 程序 欢迎 界面 


程序 欢迎 界面 也 就 是 大 家 通常 看 到 的 程序 启动 页 ， 作 为 美食 类 APP， 要 设计 出 能 刺激 
用 户 食欲 的 界面 。 





(F 


Ot 





本 界面 首先 选取 了 简约 的 杖 色 系 渐变 色 作 为 背景 ， 半 透明 的 天 空 设 计 ， 抓 住 了 设计 要 
讲究 的 轻松 感 ， 使 得 界面 干净 并 耐看 ， 制 作 流程 如 图 9-4 所 示 。 
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9-4 制作 流程 





地 制作 步 圣 


知识 点 “ 圆 角 矩 形 工具 ”、 渐 变 填 充 、“ 椭 圆 工 
第 9 章 \9.2.1 程序 欢迎 界面 








4”、 甬 贴 蒙 版 、 图 层 样式 








| 




















MA 新 建 一 个 1136 x 640 像素 的 空白 文档 并 填充 渐变 效果 ， 新 建 图 层 并 使 用 画笔 工 

/ 具 在 右 侧 涂抹 ， 增 加 界面 的 丰富 感 ， 绘 制 出 界面 的 背景 ， 如 图 9-5 所 示 。 

O02 载 入 美食 素材 图 片 并 调整 位 置 ， 使 用 “ 圆 角 和 珑 形 工 具 ” 绘 制 圆 角 撼 形 并 下 移 
=- 一 ”一 层 ， 之 后 运用 剪贴 蒙 版 使 图 片 变 成 圆 角 ， 如 图 9-6 所 示 。 





图 9-5 绘制 背景 图 9-6 编辑 图 片 
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ZL 接着 复制 圆 角 和 矩形 图 层 ， 移 动 图 层 到 顶层 ， 使 用 “ 圆 角 矩形 工具 ”， 绘 制 出 一 
个 圆 角 算 形 框 ， 并 调整 “不 透明 度 ” 为 35%， 如 图 9-7 所 示 。 
0 使 用 “ 圆 角 短 形 工具 ” 沿 着 图 片 边框 的 内 测绘 制 一 个 边框 线 ， 调 整 “不 透明 度 ” 
为 80%、 描 边 宽 度 为 5 点 ， 除 背景 以 外 ， 将 所 有 的 图 层 建 组 ， 命 名 为 “图 片 ”， 
并 将 所 有 元 素 居中 对 齐 ， 此 时 的 图 像 效 果 如 图 9-8 所 示 。 


提示 : i 

© 需 在 此 之 前 将 圆 角 矩 
形 的 “路 径 操 作 ” 设 置 
为 “ 减 去 顶层 形状 ”。 


| READIMORE | 





图 9-7 绘制 图 片 边框 图 9-8 图 像 效 果 


0 /大 使 用 “ 撼 形 工具 ”绘制 出 一 个 矩形 形状 后 ， 给 其 添加 “投影 ”图 层 样 式 并 设置 

VY 参数 值 ， 在 形状 之 上 ， 输 入 文字 信息 ， 如 图 9-9 所 示 。 

LO 选择 “ 圆 角 答 形 工具 ”， 绘 制 出 隐形 按钮 的 形状 ， 接 着 使用“ 横 排 文 字 工 具 ” 
O 在 隐形 按钮 的 上 方 输入 文字 信息 。 选 中 “钢笔 工具 ”， 在 文字 的 后 方 绘制 出 租 

头 的 形状 ， 最 后 ， 绘 制 出 手机 状态 栏 的 信息 ， 到 此 本 界面 的 绘制 完成 ， 如 图 9-10 所 示 。 


Du < 








投影 
结构 
温 合 模式 (6): 民国 "a 
不 透明度 0): 和 2 一 一 20 % 


角度 :人 150 度 加 使用 全 局 KG 


距 高 D): TT 一 一 10 像素 


扩展 R): == 全 0% 
大 小 5) FT 5 像素 


品质 


| | [消除 吉 占 人 


杂 色 N): Se 15 % 


。 回 图 导 控 空投 影 U) 
证 江 值 | [| 袜 湖 Rh 认 值 
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图 9-9 绘制 图 片 边框 图 9-10 图 像 效果 


.57 








Photoshop 热门 铬 PP 类 型 设计 从 入 门 到 精通 


(IEEB 程序 主 男 面 


本 界面 是 主要 是 用 来 展示 美食 图 文 的 界面 ， 在 设计 中 ， 要 注重 图 文 的 结合 ， 以 及 界面 
中 的 版 陈设 计 ， 既 要 突出 重点 ， 又 要 简洁 明了 。 


“设计 思路 


提取 程序 欢迎 界面 的 背景 懈 纹 加 以 白色 的 压板 作为 本 界面 的 基础 版 式 框 ， 使 用 蔓 
贴 蒙 版 ， 对 图 片 进行 编辑 ， 搭 配 文字 ， 并 调整 颜色 ， 使 得 界面 的 内 容 更 丰富 、 和 谐 ， 
如 图 9-11 所 示 为 制作 流程 。 











中 访 中 上 西 疼 
币 作 全 门 价值 ; 1~10ave 币 作 知 门 价值 : 1~15rme 
Pr 一 


饮品 甜点 
泣 作 愧 门 价值 :0.5~5ave 。 ”制作 突 门 价值 ，0.5~8we 





图 9-11 制作 流程 


< 


DFT 


知识 点 “钢笔 工具 ”、 剪 贴 蒙 版 、“ 和 矩形 工具 ”、 创 建 填充 、 图 层 样式 
光盘 路 径 第 9 章 \9.2.2 程序 主 界面 


ET ee ek ee ee 

档 中 ， 使 用 “ 拢 形 工具 ”绘制 出 白色 底板 ， 如 图 9-12 所 示 。 

0) 在 界面 上 方位 置 使 用 “椭圆 工具 ”绘制 出 一 个 正 圆 ， 添 加 “ 描 边 ”图 层 样式 ， 
一， 设置 该 图 层 的 “填充 ”为 10%， 如 图 9-13 所 示 。 























描 边 

结构 
大 小 (5): CT 1] 像素 
位 置 (P): 内 部 ~ 

混合 模式 (6): 正常 M 

不 透明 度 (0): sr 80  % 








填充 类 型 (): 颜色 ~ 
颜色 :| 





[设置 为 默认 值 。| [ 复位 为 默认 值 | 

















图 9-12 绘制 白色 底板 图 9-13 绘制 编辑 正 圆 
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7)》 使 用 “钢笔 工具 ”和 “椭圆 工具 ”绘制 形状 并 与 上 一 步骤 中 的 正 圆 一 起 编组 ， 

将 组 进行 命名 。 用 同样 的 方法 ， 绘 制 出 另 一 个 图 标 ， 命名 为 “搜索 ”， 接 着 输 

入 文字 信息 并 居中 对 齐 ， 此 时 的 界面 效果 如 图 9-14 所 示 。 使 用 “ 圆 角 和 矩形 工具 ”绘制 形 
状 并 添加 “ 描 边 ”图 层 样式 ， 如 图 9-15 所 示 。 


























描 
站 构 一 J 商店 
大 小 站 1 2 一 = 1] 像 圳 美食 主题 
位 置 fp): 内 部 ~ 
混合 模式 (6): 正常 E 





不 透明 度 (0); se 100  %% 





填充 类 型 F): 颜色 ~ 
颜色 : 周二 





保 症 为 点 训 值 县 位 为 点 记 值 





图 9-14 界面 效果 图 9-15 绘制 形状 并 添加 图 层 样 式 
0 复制 上 一 步骤 的 形状 ， 并 调整 其 填充 颜色 为 自 色 、 宽 度 为 50%， 选 中 两 个 形状 
进行 左 对 齐 。 


LO 使 用 “ 横 排 文 字 工具 ”将 字体 磊 色 设置 橙色 系 ， 在 相对 应 的 位 置 输 入 文字 信息 
此 时 效果 如 图 9-16 所 示 。 
D 导入 素材 图 片 ， 使 用 “ 答 形 工具 ”并 结合 剪贴 索 版 ， 对 图 片 进行 调整 和 编辑 ， 
在 图 片 下 方 输入 相应 的 文字 信息 并 编辑 。 
择 Wa 入 贿 男 昌 了 在 选项 栏 中 选择 心 形 形 状 ， 在 图 片 的 在 上 角 丝 会 制 形 状 
并 使 用 “直接 选择 工具 ”编辑 形状 ， 最 后 建 组 命名 为 “美食 1”， 如 图 9-17 所 示 。 


和 人 人 光一 上 














中 钨 
制作 器 门 价值 ，1~10ave 





图 9-16 界面 效果 图 9-17 图 文 编辑 
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S 依照 “美食 1” 组 的 绘制 方法 ， 绘 制 

出 其 他 3 个 组 ， 并 分 别 命 名 为 “美食 

9” 1 3 人 

4 RD | 玫 本 和 

行 右 对 齐 ， 了 最 后 将 程序 欢迎 界面 中 的 “手机 状 

态 栏 ” 图 层 复制 到 此 界面 文档 中 ， 此 时 界面 效 
果 如 图 9-18 所 示 。 





西 发 
制作 突 门 价值 ，1~ 
_ 4 
Wg 


饮品 甜点 
制作 究 门 价值 : 0.5~Sawe 。 ”制作 器 门 价值 : 0.5~Bwe 





图 9-18 界面 效果 


(CEERB 个 人 中 心 界面 


个 人 中 心 界面 的 主要 内 容 是 用 户 的 个 人 信息 ， 以 及 与 之 相关 的 各 种 需 来。 因此， 界面 
的 图 文 设计 要 清晰 明了 ， 并 且 内 容 信息 要 丰富 饱满 ， 以 满足 用 户 的 便捷 体验 。 





SET 


根据 APP UI 设计 的 基本 原则 ， 在 此 界面 中 ， 仍 然 以 整个 APP UI 设计 的 主 色 系 一 一 
橙色 作为 主 色调 ， 界 面 中 的 各 个 小 图 标 在 橙色 的 基础 上 根据 所 搭配 的 文字 加 以 细微 变化 。 
这 样 既 能 保证 设计 的 连贯 性 ， 又 能 统一 画面 ， 重 复 的 背景 设计 可 以 刺激 用 户 的 感官 ， 增 加 
用 户 的 体验 印象 ， 其 制作 流程 如 图 9-19 所 示 。 


| 


15:30 


个 人 中 心 


我 的 订单 


我 的 红外 





[OJ 





图 9-19 制作 流程 
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2 制作 步 又 


A 
第 9 章 \9.2.3 个 人 中 心 界面 




















LA 新 建 一 个 1136 x 640 像素 的 空白 文档 ， 将 制作 的 程序 主 界面 文档 中 的 背景 图 层 

复制 到 本 文档 中 ， 制 作成 新 的 背景 ， 如 图 9-20 所 示 。 

O02 使 用 “和 珑 形 工具 ”在 界面 底部 绘制 出 一 个 合适 大 小 的 和 白色 底板 ， 此 时 的 界面 
em 次 采 如 图 9-21 所 示 。 


图 9-20 界面 背景 图 9-21 界面 效果 


7) pe 会 制图 标的 方法 在 本 界面 中 相应 位 置 绘制 出 “首页 ”图 标 
和 “设置 ”图 标 ， 并 在 导航 栏 中 输入 相对 应 的 文字 信息 ， 如 图 9-22 所 示 。 
0 使 用 “ 撼 形 工 具 ” 绘 制 形状 并 载 入 素材 图 片 ， 利 用 剪贴 蒙 版 将 图 片 调整 到 合适 
大 小 ， 接 着 利用 “椭圆 工具 ”及 剪贴 莹 版， 绘制 出 头像 ， 并 在 头像 下 方 添加 文 
字 人 信息， 此 时 的 效果 如 图 9-23 所 示 。 


人 一 


个 人 中 心 个 人 中 心 


© 
提示 : 在 载 入 第 一 张 
素材 图 片 的 时 候 要 先 将 
图 片 进行 高 斯 模糊 处 理 。 


READIMORE | 





图 9-22 绘制 图 标 并 输入 文字 图 9-23 制作 头像 
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OA OH A A ht 
S| 的 文字 信息 ， 如 图 9-24 所 示 。 
Am 接着 将 上 一 个 图 层 复制 多 个 并 修改 文字 信息 ， 使 用 “钢笔 工具 ”结合 “ 自 定 形 
状 工具 ”和 “直接 选择 工具 ”， 对 图 标 进 行 调整 ， 如 图 9-25 所 示 。 


个 人 中 心 个 人 中 心 


起 


下 国 


我 的 铺 币 我 的 订单 我 的 收藏 


多 多 伯 


我 的 红包 由 练 值 了 我 的 铺子 


[DJ %2 


上 仿 美 食 招商 台 作 





图 9-24 绘制 单个 选项 图 9-25 复制 并 编辑 多 个 选项 
0 Wo 最 后 ， 将 上 个 文档 中 的 “手机 状态 栏 ”图 层 复 制 到 本 文档 中 ， 最 终 界 面 效 果 如 
图 9-26 所 示 。 


生理 生 古国 国电 信 15:30 


O MA 


上 
NS 


美食 大 师 9 


vw 


我 的 订单 我 的 收藏 


VY 


技 的 铺子 


[C0] 2 


上 信和 秆 外 招 而 外 作 





图 9-26 最 终 界面 效果 
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(CI 设置 界面 


在 整个 APP 界面 设计 的 过 程 中 ， 相 对 于 其 他 界面 而 言 ， 设 置 界 面 无 论 是 在 男 面 中 还 
是 在 内 容 上 ， 都 算是 比较 好 设计 的 界面 了 ， 此 时 需要 做 的 就 是 把 握 好 一 个 大 概 的 方向 ， 将 
应 当 体 现 的 内 容 、 图 标 及 排版 设计 等 做 好 ， 下 面 介绍 具体 方法 。 


设计 思路 





为 了 保证 整个 设计 的 一 致 性 与 和 谐 性 , 这 里 仍然 保持 大 致 背景 不 变 , 在 pa 
对 界面 进行 调整 和 制作 。 为 了 能 使 界面 看 起 来 不 那么 单调 ， 对 其 文字 颜色 和 图 标 进行 了 细 
微调 整 ， 并 且 在 界面 分 隔 色 块 上 调整 了 “不 透明 度 ”， 使 界面 更 加 丰富 ， 如 图 9-27 所 示 
为 制作 流程 。 


< 消息 通知 


右 ” 清 理 缓存 


二 联系 我 们 





图 9-27 制作 流程 


2 制作 步 又 


“钢笔 工具 ”” 圆 角 和 矩形 工具 ”、 图 层 样式 
第 9 章 \9.2.4 设置 界面 
0 Amj 新 建 一 个 1136 x 640 像素 的 
/ 空白 文档 ， 将 制作 的 程 友 主 
界面 文档 中 的 背 孙 图 层 复制 到 本 文档 
中 ， 制 作成 新 的 背 未 ， 如 图 9-28 所 示 。 
使 用 “ 短 形 工具 ”绘制 出 
(Oz 形状 ， 并 设置 形状 填充 顾 
| | rE 9 2 Vo in 





























图 9-28 绘制 背景 图 9-29 绘制 矩形 
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eu) 
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LI 继续 使 用 “ 撼 形 工具 ”绘制 矩形 并 设置 其 “不 透明 度 ” 为 80%， 在 天 形 上 输入 

J 文字 信息 。 使 用 “椭圆 工具 ”绘制 一 个 正 圆 ， 添 加 “ 描 边 ”图 层 样 式 ,， 设置 “ 填 

充 ” 为 20%， 如 图 9-30 所 示 ， 

0 使 用 “和 珑 形 工 具 ” 绘 制 矩 形 , 设置 填充 色 为 白色 并 设置 描 边 颜色 ,使 用 “直线 工具 ” 
在 矩形 上 绘制 出 一 条 直线 并 移动 到 合适 位 置 ， 此 时 的 界面 将 果 如 图 9-31 所 示 。 





一 搞 边 
一 结构 一 
大 小 G3}: C= | 了 像素 
位 置 p): 内 部 
混合 模式 人 @): 正常 
不 透明 度 (0): 于 80  % 


























填充 类 型 F): 颜色 ~ 
颜色 :| | 








设置 为 默认 值 夏 位 为 默认 值 














9-30 绘制 导航 栏 9-31 界面 效果 


0 大 使 用 “钢笔 工具 ”和 “ 算 形 工具 ”， 绘 制 出 图 标 和 箭头 ， 然 后 输入 文字 信息 并 

S 设置 颜色 ， 如 图 9-32 所 示 。 

O06 按照 上 一 步骤 的 方法 绘制 出 其 他 的 竹 形 形状 、 图 标 及 文字 信息 ， 并 添加 手机 状 
O 态 栏 ， 最 终 效 果 如 图 9-33 所 示 。 








图 9-32 绘制 图 标 并 输入 文字 图 9-33 最 终 效果 
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(IE 界面 设计 中 需要 注意 的 小 细节 


俗话 说 : “细节 决定 成 败 ”。 在 界面 设计 中 ， 细 节 也 同样 会 影响 用 户 的 体验 感受 。 下 
面 看 一 看 都 有 哪些 细节 会 有 如 此 的 影响 力 ， 又 应 该 怎么 处 理 才 能 恰到好处 ， 给 设计 师 所 设 
计 的 APP 加 分 。 


人 加 文 守 : 首先 要 注意 的 就 是 界面 设计 中 的 文 业内 容 ， 虽 然 这 一 点 与 界面 设计 没有 
直接 联系 ， 也 不 是 界面 的 直接 设计 元 素 ， 但 是 前 期 文生 文员 所 策划 文生 的 严 说 
和 完整 性 都 会 给 整个 APP 的 设计 加 分 。 

人 回春 百 统一 性 : 在 设计 的 过 程 中 ， 要 时 刻 注意 界面 的 统一 性 ， 无 论 设计 到 哪 一 阶 
段 ， 都 要 仔细 检查 界面 中 的 元 素 、 顾 色 、 文 字 阴 影 和 图 标的 阴影 等 是 否 一 致 ， 
所 有 窗口 按钮 的 位 置 是 否 一 致 ， 标 签 和 信息 是 否 一 致 ， 颜 色 方 案 是 否 一 致 ， 当 
出 现 不 一 致 的 时 候 ， 要 及 时 进行 修改 ， 以 防 忘记 ， 如 图 9-34 所 示 。 


到 中 国 称 动 . 室 44:21 PM 100% mm 


半 光 IN ddv 亲 半 日 部 证 包 6 中 


站 长 统计 ， 点 击 统 计 


09. 


站 长 工具 箱 


图 9-34 CNZZ 界面 设计 
© 像素 粮 准 化 ， 虽然 APP 界面 设计 与 PC 端 界 面 设计 相 比 ， 在 尽 寸 上 相差 比较 大 ， 
昌 是 仍然 要 注意 界面 中 各 个 按钮 、 图 标的 边缘 及 其 他 元 素 放大 后 边缘 是 否 出 现 
了 垂直 或 者 水 平 的 虚 化 。 
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© J 这 个 细节 和 上 一 细节 有 一 个 共同 点 ， 就 是 


> 看 清 清楚 
我 们 不 能 只 
是 对 齐 的 ， 


是 需要 对 界面 元 素 进行 放 


亏 素 的 大 小 是 否 一 致 。 对 于 多 个 相同 或 者 应 处 于 统一 位 置 等 的 对 象 ， 
“是 靠 自己 的 眼睛 去 对 齐 ， 这 样 只 
但 是 如 果 要 做 到 真正 的 对 齐 ， 需 要 借助 网 格 和 辅助 线 等 。 


“是 能 保证 在 视觉 上 界面 的 各 个 元 素 


整体 配色 : 顾 色 的 搭配 是 能 带 给 用 户 第 一 视觉 感受 的 ， 所 以 在 最 初 给 设计 对 象 
se 


度 颜 色 ， 
上 是 好 的 配色 ， 如 图 9-35 所 示 。 


EAM 可 


NIKE+ FUELBAND SE 


MOTIVATION ON YOUR WRIST, 


AND FUN we | 盯 Wi ACTIVE 


$169 


IF YOU CAN RUN A MILE, 
RUN A RACE, 
JUST DO IT. 


但 是 从 另 一 个 方面 来 讲 ， 配 色 只 要 是 能 带 给 


SPORTS 

@ Cricket OUTRUN RESULUTIONS 
篇 FootBall i i 
泓 Running 

el 


Wh: 


NIKE+ 

GD Home 

4 Nike+ Gear 
© Places 


WOMEN'S 
outrun resulutions 


un NikeFuel? 


图 9-35 Nike 界面 配色 


@@ 送 当 地 留 白 : 对 于 移动 端 APP 来 讲 ， 
表达 出 精准 简洁 的 内 容 。 所 以 ， 
方面 来 讲 ， 在 视觉 上 


(CO 用 中 需要 族 守 的 设计 准则 


无 论 是 做 哪 一 方面 的 设计 ， 都 要 在 遵 


鉴于 对 象 的 特殊 性 ， 
适当 留 白 能 够 让 用 户 更 快捷 地 使 用 ， 
也 能 让 用 户 心情 不 那 





需要 在 有 限 的 空间 内 
从 另 一 个 
么 堵塞 。 


守 其 设计 准则 的 基础 上 添加 自己 的 创意 ， 这 样 才 
能 保证 设计 具有 更 强 的 实用 性 及 吸引 力 ， 同 时 在 该 激烈 竞 
的 UI 设计 ， 又 要 遵守 哪些 设计 准则 呢 ? 下 面 残 


争 中 脱 矣 而 出 。 那 么 ， 作 为 APP 
合 大 家 一 一 列举 。 


人 四 屏 得 尺寸 合适 : 在 创建 屏幕 布局 的 时 候 ， 一 定 要 选择 适 配 设备 的 屏幕 大 小 。 具 


体 体 现 于 用 户 在 体验 的 时 候 ， 应 该 一 次 就 看 清 主要 内 容 ， 而 无 须 缩放 或 者 是 水 
平 滚动 来 寻找 想 要 看 到 的 内 容 ， 如 图 9-36 和 图 9-37 所 示 。 
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Product Details 







Fresh Homemade Burger 


Price: $5 $10 
食 食 食 食 (215) 


Description 


Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Suspendisse sed leo tellus. 
Praesent nec vehicula ligula, non laoreet ligula. 
Maecenas at massa eget orci porttitor semper. 
Sed lobortis magna in faucibus commodo. Ut 
purus odio, gravida sit amet laoreet at, dictum 
et urna. 





图 9-36 屏幕 尺寸 适 配 


@ 可 能 失控 件 大 小 合适 :在 设计 可 触 控 的 控件 时 ， 其 尺寸 不 能 小 于 44 x 44 像素 ， 


eeeee Carrier 13:37 


动 Product Details 














rresh Homemade Burger 
Price: $5 $10 
妇 食 食 食 (215) 


Descriotion 


.orem ipsum dolor sit amet, conNnsectetur 
idipiscina elit. Suspendisse sed leo tellus. 























图 9-37 屏幕 尺寸 不 适 配 


只 有 这 样 才 能 确保 用 户 在 使 用 时 触摸 的 命中 府 ， 如 图 9-38 和 图 9-39 所 示 。 











图 9-38 可 触 控 控 件 大 小 合适 





图 9-39 可 触 控 控 件 大 小 不 合适 
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和 人 人 光一 上 














Photoshop 热门 做 PP 类 型 设计 从 入 门 到 精通 


© 文字 尺寸 大 小 要 合适 : 作为 APP 的 UI 设计， 一 般 要 注意 界面 中 的 文字 不 得 小 
于 11 点， 这 样 用 户 在 观看 界面 的 时 候 才 能 在 正常 距离 下 不 需要 缩放 画面 就 能 
清楚 地 看 到 文字 所 传递 的 信息 ， 如 图 9-40 和 图 9-41 所 示 。 


Here no dick 





图 9-40 文字 尺寸 大 小 合适 图 9-41 文字 尺寸 大 小 不 合适 


@ 使 用 高 像素 的 图 片 : 在 界面 设计 中 ， 会 使 用 “钢笔 工具 ”及 “ 适 形 工具 ”绘制 
出 一 些 形象 等 元 素 ， 但 是 每 个 界面 中 ， 都 会 使 用 到 一 些 在 网 络 或 者 是 书籍 中 收 
集 到 的 相关 图 片 作为 界面 中 的 图 片 元 素 ， 所 以 在 收集 的 过 程 中 一 定 要 注意 ， 好 
看 、 合 适 的 图 片 国 然 重 要 ， 但 是 一 定 不 能 忽视 它 的 像素 大 小 ， 这 样 在 一 些 高 分 
辩 率 的 屏幕 上 才能 够 得 以 清晰 地 展示 ， 如 图 9-42 和 图 9-43 所 示 。 


hp | , = 





图 9-42 高 像素 图 片 
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图 9-43 低 像素 图 片 


避免 图 片 拉 伸 : 这 是 界面 设计 中 使 用 的 图 片 ， 还 需要 注意 的 另外 一 点 。 在 设计 
时 ， 要 时 刻 注 意 检 查 界 面 中 的 图 片 在 进行 缩放 的 时 候 是 否 是 等 比例 缩放 ， 在 调 
整 其 他 图 层 的 时 候 是 否 一 不 小 心 将 图 片 跟着 进行 了 移动 和 缩放 。 尤 其 要 注意 ， 
如 果 在 设计 过 程 中 有 喜欢 编组 的 习惯 ， 一 定 要 注意 在 移动 时 ， 界 面 中 不 需要 移 
动 的 图 层 是 否 也 跟着 移动 ， 如 图 9-44 和 图 9-45 所 示 。 





a 
图 9-44 等 比例 缩放 图 9-45 图 片 变形 
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本 书 是 一 本 介绍 使 用 Photoshop 设计 制作 APP UI 的 图 书 。 全 书 分 为 
9 章 ， 包 括 APP UI 设计 基础 、Photoshop 在 APP UI 中 的 基础 应 用 、APP 
界面 中 常见 元 素 设 计 、 常 见 界面 构图 与 设计 、 游 戏 类 APP UI 设计 、 音 乐 
类 APP UI 设计 、 社 交 类 APP UI 设计 、 购 物理 财 类 APP UI 设计 ， 以 及 生 
活 工 具 类 APP UI 设计 等 方面 知识 。 从 基础 到 完整 界面 的 讲解 ， 涵 盖 了 各 
类 热门 APP UI 的 设计 制作 ， 使 读者 由 浅 及 深 ， 逐 步 了 解 使 用 Photoshop 
制作 APP UI 的 整体 设计 思路 和 制作 过 程 。 

本 书 将 APP UI 设计 的 相关 理论 与 实例 操作 相 结合 ， 不 仅 能 使 读者 学 
到 专业 知识 ， 也 能 在 实例 操作 中 掌握 实际 应 用 ， 全 面 掌 握 APP UI 的 设计 
方法 和 技巧 。 
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| 关注 操作 习惯 


四 


用 户 的 操作 习惯 决定 着 APP 
的 布局 架构 。 比 如 ， 考 虑 主 
体 功 能 的 启动 更 适合 用 户 使 
用 左手 还 是 右手 ， 避免 出 现 
触摸 盲点 ， 从 而 提高 用 户 操 
作 体 验 的 舒适 度 。 


”者 虑 使 用 环境 


不 同类 型 APP 有 自己 的 定 
位 ， 也 就 决定 了 其 使 用 环 
境 ， 包括 时 间 、 地 点 和 和 氛 
围 等 。 比 如 ， 碍 询 类 APP 
的 按钮 和 信息 栏 尺寸 尽量 
放大 ， 从 而 方便 用 户 快 速 
搜索 和 查阅 。 
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三 大 。 本 书 通过 总 结 不 同类 型 APP 的 风格 、 布 局 和 配 


设计 思路 ， 您 知道 吗 ? 
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合 该 类 型 APP 的 相应 界面 ， 从 而 帮 有 
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-了 一 ky [ AAA 十 加 -下 一 四 | 四 1 - 6 => 
满足 新 形势 下 的 职位 要 求 。 


太 多 的 访问 级 别 会 使 用 户 失 去 耐 
心 ， 最 终 可 能 放弃 产品 。 比 如 ， 

使 用 选项 卡 或 弹出 菜单 的 方式 ， 

以 及 局 平 化 的 层级 结构 来 让 用 户 
访问 更 深 级 别 的 内 容 。 yy 


弱化 访问 级 别 


[| 图 功能 主 次 分 明 


APP 设 计 同 样 也 可 以 采用 管 
理学 上 的 二 八 定 律 ， 也 就 是 
将 主流 用 户 最 重要 、 最 常用 
的 20% 功 能 进行 直接 展示 ， 
而 其 他 80% 功 能 适当 隐藏 ， 
把 不 常用 的 功能 设置 到 更 深 
的 级 别 。 





党 减少 用 户 输入 


由 于 APP 运 行 于 手机 端 ， 用 
户 的 操作 会 受到 屏幕 尺寸 的 
限制 ， 不 能 像 在 PC 端 一 样 流 
畅 地 进行 打字 ， 因 此 ， 在 相 
关 的 功能 上 应 尽 可 能 地 减少 
用 户 的 文字 输入 。 
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